Compare commits
63 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 21d84a77a9 | |||
| 2172d2ba45 | |||
| 915335aea6 | |||
| 9f791f9f93 | |||
| c31e199e45 | |||
| 42409ddec0 | |||
| d667feda0f | |||
| 6987c8a172 | |||
| aeda3f6df1 | |||
| 5cc8511990 | |||
| 3f91afd8d7 | |||
| 8bedf21c08 | |||
| 5d5eab70fe | |||
| b7a2412e88 | |||
| dd9e37ea3f | |||
| c09b9ab7fd | |||
| 3e73c0e68f | |||
| 345d14d285 | |||
| bc24420ad4 | |||
| 788c7ab336 | |||
| eb41b65dad | |||
| 095032a231 | |||
| adb5d87d1d | |||
| 8b3ea3ed2e | |||
| d3746406a6 | |||
| 1a3a1df604 | |||
| 4b0809a82d | |||
| cefb71f5fa | |||
| fef9499e1a | |||
| 72c8cad963 | |||
| aa77814206 | |||
| fcf8626c26 | |||
| be51c97dce | |||
| 4a1663b426 | |||
| 17d9f16b7d | |||
| efb0dea5ed | |||
| 120a386f05 | |||
| c64be74992 | |||
| 6a3593de7a | |||
| de066145d3 | |||
| 96cb64f33a | |||
| 59dac9be56 | |||
| 7f05c4ab16 | |||
| 5d64ca552e | |||
| a7038367e4 | |||
| 15b53a9b2b | |||
| 952263b3e5 | |||
| 5416f809a3 | |||
| 0b9d73018d | |||
| 29a4d01ff4 | |||
| 8f2b82405a | |||
| 424987bedb | |||
| ef4df2925f | |||
| 8bc8c53a3b | |||
| 98549c52be | |||
| 70f8b210f4 | |||
| 4937225da3 | |||
| da4d46b0d8 | |||
| f9f9fec97d | |||
| e74e8aa6d6 | |||
| 447ef593fa | |||
| 9f70d89046 | |||
| 42a246d633 |
@@ -0,0 +1,146 @@
|
||||
<!-- adr-kit-guide v0.13.0 -->
|
||||
<!-- Canonical project-side ADR guide. Copied from the plugin's templates/adr-kit-guide.md to .claude/adr-kit-guide.md by /adr-kit:init, /adr-kit:upgrade, and /adr-kit:setup. -->
|
||||
<!-- This file is plain markdown — readable by Claude Code, headless `claude -p`, shell scripts in pre-commit hooks, evaluator scripts, and any agent that doesn't process @-imports. Do not embed Claude-Code-specific syntax inside this file. -->
|
||||
|
||||
# ADR Kit Guide
|
||||
|
||||
This project uses [adr-kit](https://github.com/rvdbreemen/adr-kit) to manage Architecture Decision Records. The kit ships:
|
||||
|
||||
- a project-side guide (this file) referenced from `CLAUDE.md`,
|
||||
- a library of slash commands and a subagent for ADR authorship,
|
||||
- a pre-commit hook that catches code changes drifting outside accepted ADRs.
|
||||
|
||||
ADR files live at `docs/adr/ADR-NNN-kebab-case-title.md`. They are versioned, immutable once accepted, and the durable record of *why* the codebase looks the way it does.
|
||||
|
||||
## Three operating modes
|
||||
|
||||
| Mode | When | Entry point |
|
||||
|---|---|---|
|
||||
| **Init / bootstrap** | Once per project: scan source + docs, propose a starter ADR set, hook the kit into `CLAUDE.md`, install the pre-commit hook | `/adr-kit:init` |
|
||||
| **Per-commit verification** | Every `git commit`: declarative-rule check **plus** Claude Sonnet LLM judge for `llm_judge: true` ADRs in one batched call. Default-on as of v0.13.0. Falls back to declarative-only when the `claude` CLI is unavailable | `.githooks/pre-commit` (auto) |
|
||||
| **On-demand invocation** | Mid-session: write a new ADR, judge a staged diff, supersede an existing decision | `/adr-kit:adr`, `/adr-kit:judge`, `adr-generator` subagent |
|
||||
|
||||
## Slash commands
|
||||
|
||||
| Command | Purpose | User-only? |
|
||||
|---|---|---|
|
||||
| `/adr-kit:init` | One-shot project bootstrap (audit codebase, generate ADRs, install hook). Combines `setup` + audit + `install-hooks`. | yes |
|
||||
| `/adr-kit:adr` | Author a single ADR (delegates to `adr-generator` subagent; runs four verification gates). | no — model can self-call |
|
||||
| `/adr-kit:judge` | Interactive judge against a staged diff. Runs declarative checks + in-session LLM check for `llm_judge: true` ADRs. Walks resolution paths on violation. | no — model can self-call |
|
||||
| `/adr-kit:lint` | Validate existing ADRs against the four verification gates. | yes |
|
||||
| `/adr-kit:migrate` | Rewrite legacy ADRs into canonical format. | yes |
|
||||
| `/adr-kit:setup` | Append `## ADR Kit` block to `CLAUDE.md` (idempotent). | yes |
|
||||
| `/adr-kit:upgrade` | Migrate v0.11 → v0.12 footprint without re-running the heavy audit. | yes |
|
||||
| `/adr-kit:install-hooks` | Install or uninstall the pre-commit hook. | yes |
|
||||
|
||||
## The four verification gates
|
||||
|
||||
An ADR cannot move from `Proposed` to `Accepted` until all four pass.
|
||||
|
||||
1. **Completeness** — every required section is present and non-empty: Status, Context, Decision, Alternatives Considered (≥ 2), Consequences (positive + negative), Related Decisions, References. Plus filename matches `ADR-NNN-kebab-case.md` and the heading number agrees.
|
||||
2. **Evidence** — Context or References cites at least one concrete external/internal artefact (incident, profiling data, code path, RFC, vendor doc). No hand-waving justifications.
|
||||
3. **Clarity** — Decision section names a single concrete choice (not a survey), uses imperative voice, no hedging language ("perhaps", "we should consider"). Identifiers (file paths, function names, config keys) are traceable.
|
||||
4. **Consistency** — filename, heading number, and any cross-references resolve. No duplicate ADR numbers in the directory.
|
||||
|
||||
`bin/adr-lint` enforces Completeness and Consistency deterministically. Evidence and Clarity are heuristic; opt in via `--gates evidence,clarity` or run `/adr-kit:lint` to use the LLM-aware skill.
|
||||
|
||||
## Authoring workflow (`/adr-kit:adr` or `adr-generator`)
|
||||
|
||||
1. Identify the architecturally significant change (architecture, NFRs, interfaces, dependencies, build/CI tooling). Refactors and bug fixes within existing patterns do NOT need an ADR.
|
||||
2. Invoke `/adr-kit:adr` (or the `adr-generator` subagent). Provide: title, context with concrete forces, ≥ 2 alternatives with rejection reasons, consequences (both directions), related ADRs.
|
||||
3. The agent applies the four gates and writes `docs/adr/ADR-NNN-…md` with `Status: Proposed`.
|
||||
4. Human review. Iterate until all gates pass.
|
||||
5. Flip Status to `Accepted, YYYY-MM-DD` after explicit human approval. **Never self-approve.**
|
||||
6. If the decision touches code in a mechanically expressible way, add an `Enforcement` block (see below) so the pre-commit hook can guard the boundary.
|
||||
|
||||
## Enforcement block (v0.12+)
|
||||
|
||||
Optional `## Enforcement` section at the end of an ADR. Fenced JSON code block, parsed by `bin/adr-judge`. Schema: plugin's `schemas/adr-enforcement.schema.json`.
|
||||
|
||||
```json
|
||||
{
|
||||
"forbid_pattern": [
|
||||
{ "pattern": "\\bArduinoJson\\b", "path_glob": "src/**/*.{ino,cpp,h}",
|
||||
"message": "Use snprintf_P + sendJsonMapEntry; ArduinoJson fragments the heap (ADR-042)." }
|
||||
],
|
||||
"forbid_import": [
|
||||
{ "pattern": "^#include\\s+<ArduinoJson\\.h>", "path_glob": "src/**" }
|
||||
],
|
||||
"require_pattern": [],
|
||||
"llm_judge": false
|
||||
}
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
|
||||
- `forbid_pattern` — regex must NOT match any added line in the diff (lines starting with `+`, excluding `+++` markers).
|
||||
- `forbid_import` — same engine as `forbid_pattern`; the separate name documents intent.
|
||||
- `require_pattern` — regex must match at least once in the post-diff content of any file matching `path_glob`.
|
||||
- `llm_judge: true` — Claude Sonnet evaluates the diff against this ADR's `## Decision` text at commit time (default-on as of v0.13.0). The pre-commit hook batches all `llm_judge: true` ADRs into one Sonnet call and blocks the commit on `VIOLATION`. Falls back gracefully (advisory only, exit 0) when the `claude` CLI is missing.
|
||||
- ADRs with no Enforcement block are skipped silently by the judge.
|
||||
|
||||
**Path globs** support `**` (recursive). Examples: `src/**/*.py`, `tests/**`, `**/Makefile`.
|
||||
|
||||
## Pre-commit hook
|
||||
|
||||
After `/adr-kit:init` (or `/adr-kit:install-hooks`), every `git commit` runs `bin/adr-judge` on the staged diff with two passes:
|
||||
|
||||
- **Declarative pass** — fast, regex-only, no LLM. A violation exits non-zero and blocks the commit.
|
||||
- **LLM pass (Sonnet, default-on as of v0.13.0)** — all `llm_judge: true` ADRs are batched into one `claude -p --model claude-sonnet-4-6` call. Sonnet returns a per-ADR JSON verdict; any `VIOLATION` blocks the commit with the model's one-sentence reason. Falls back gracefully when the `claude` CLI is missing or unauthenticated — never blocks a legitimate commit due to tooling drift.
|
||||
|
||||
**Cost shape** (typical project, 50 `llm_judge` ADRs, small diff): roughly $0.10–0.30 per commit on Sonnet 4.6 with prompt caching. Latency 5–10s. Configurable via `judge.llm_model` / `judge.llm_timeout_seconds` / `judge.llm_cmd` in `docs/adr/.adr-kit.json`.
|
||||
|
||||
**Knobs:**
|
||||
|
||||
- Disable LLM pass per commit: `ADR_KIT_NO_LLM=1 git commit -m "…"`
|
||||
- Disable hook entirely per commit: `ADR_KIT_HOOK_DISABLE=1 git commit -m "…"`
|
||||
- Switch model: set `judge.llm_model: "claude-haiku-4-5"` in `.adr-kit.json` for higher throughput at lower cost.
|
||||
- Remove permanently: `/adr-kit:install-hooks --uninstall`
|
||||
|
||||
## Supersession (changing a decision)
|
||||
|
||||
Accepted ADRs are immutable. To change a decision:
|
||||
|
||||
1. Author a new ADR with the next number. Status `Proposed`. The Decision should explain what changes and why now.
|
||||
2. In its Related Decisions: `Supersedes ADR-OLD`.
|
||||
3. After the new ADR is `Accepted`: edit ONLY the old ADR's Status line to `Superseded by ADR-NEW, YYYY-MM-DD.` Leave every other section untouched — the old decision's content is the historical record.
|
||||
|
||||
Never edit Decision, Context, Consequences, or Alternatives of an Accepted/Deprecated ADR. The Status line is the only permitted change.
|
||||
|
||||
## Code review checks
|
||||
|
||||
When reviewing a PR, apply these seven checks (Check 7 added in v0.12):
|
||||
|
||||
1. **ADR exists** for any architecturally significant change in the PR (new dep, interface change, NFR shift, build tooling change). Missing → request the author to invoke `/adr-kit:adr` or `adr-generator`.
|
||||
2. **ADR is linked** in the PR description (path or relative URL).
|
||||
3. **No violation** of Accepted ADRs in the diff. Cross-reference against `docs/adr/README.md` and the Enforcement blocks. The pre-commit hook should have caught this; if it didn't, the ADR is missing rules or wasn't installed.
|
||||
4. **Supersession chain is correct** — old ADR's Status updated, new ADR cross-references, content immutability preserved.
|
||||
5. **All four gates pass** on any new/modified ADR. Cite the failing gate when blocking ("fails Evidence gate — no concrete reference in Context").
|
||||
6. **Legacy non-compliance has a remediation plan** — pre-existing violations that this PR doesn't fix should at least carry a `// TODO(ADR-NNN): align` or a backlog entry, not be silently ignored.
|
||||
7. **Enforcement block is set appropriately** on any new Accepted ADR with a code surface. Either declarative rules, OR `llm_judge: true`, OR an explicit "manual review only" note in the ADR body explaining why the rule cannot be expressed mechanically. Missing block on a code-touching ADR is a smell.
|
||||
|
||||
## Anti-rationalisation guards
|
||||
|
||||
When `/adr-kit:adr` is asked to write or accept an ADR, it actively pushes back on these nine common excuses (see plugin's `skills/adr/SKILL.md` for the full text):
|
||||
|
||||
- "It's just a small change" — the rule is "architecturally significant", not "large".
|
||||
- "We can decide later" — later is now; defer = decide.
|
||||
- "Everyone knows this" — undocumented tacit knowledge is the problem ADRs solve.
|
||||
- "It's documented in the code" — code shows what, not why.
|
||||
- "We'll do it the same as last time" — name "last time" with an ADR reference.
|
||||
- "There's only one option" — there are always alternatives; "do nothing" is one.
|
||||
- "It's reversible" — most architecture is partially reversible; the ADR captures the *current* commitment.
|
||||
- "It's a refactor" — pure refactors don't need ADRs; *new patterns* introduced during refactoring do.
|
||||
- "We don't have time" — opportunity cost of skipping is a future maintainer hunting for the why.
|
||||
|
||||
## Plugin-side deep dives
|
||||
|
||||
This guide is the project's own copy. For agents inside Claude Code, the plugin auto-loads richer instructions:
|
||||
|
||||
- Plugin path (locale-dependent): `~/.claude/plugins/cache/rvdbreemen-adr-kit/adr-kit/<version>/`
|
||||
- `instructions/adr.coding.md` — per-developer rules (when to invoke the agent, supersession workflow, Definition of Done).
|
||||
- `instructions/adr.review.md` — the seven review checks with citation templates.
|
||||
- `skills/adr/SKILL.md` — full anti-rationalisation guard list, gate definitions, code examples.
|
||||
- `agents/adr-generator.md` — the subagent prompt.
|
||||
|
||||
If you're working outside Claude Code (in a hook, a CI job, or a different agent), this file (`.claude/adr-kit-guide.md`) is your one-stop reference. Keep it in version control with the rest of the project.
|
||||
@@ -0,0 +1,7 @@
|
||||
Copyright 2026 WH-2099
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
name: mermaid
|
||||
description: Generate Mermaid diagrams from user requirements. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 more diagram types.
|
||||
allowed-tools: Read Write Edit
|
||||
metadata:
|
||||
argument-hint: "[diagram description or requirements]"
|
||||
---
|
||||
|
||||
# Mermaid Diagram Generator
|
||||
|
||||
Generate high-quality Mermaid diagram code based on user requirements.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Understand Requirements**: Analyze user description to determine the most suitable diagram type
|
||||
2. **Read Documentation**: Read the corresponding syntax reference for the diagram type
|
||||
3. **Generate Code**: Generate Mermaid code following the specification
|
||||
4. **Apply Styling**: Apply appropriate themes and style configurations
|
||||
|
||||
## Diagram Type Reference
|
||||
|
||||
Select the appropriate diagram type and read the corresponding documentation:
|
||||
|
||||
| Type | Documentation | Use Cases |
|
||||
| ---- | ------------- | --------- |
|
||||
| Flowchart | [flowchart.md](references/flowchart.md) | Processes, decisions, steps |
|
||||
| Sequence Diagram | [sequenceDiagram.md](references/sequenceDiagram.md) | Interactions, messaging, API calls |
|
||||
| Class Diagram | [classDiagram.md](references/classDiagram.md) | Class structure, inheritance, associations |
|
||||
| State Diagram | [stateDiagram.md](references/stateDiagram.md) | State machines, state transitions |
|
||||
| ER Diagram | [entityRelationshipDiagram.md](references/entityRelationshipDiagram.md) | Database design, entity relationships |
|
||||
| Gantt Chart | [gantt.md](references/gantt.md) | Project planning, timelines |
|
||||
| Pie Chart | [pie.md](references/pie.md) | Proportions, distributions |
|
||||
| Mindmap | [mindmap.md](references/mindmap.md) | Hierarchical structures, knowledge graphs |
|
||||
| Timeline | [timeline.md](references/timeline.md) | Historical events, milestones |
|
||||
| Git Graph | [gitgraph.md](references/gitgraph.md) | Branches, merges, versions |
|
||||
| Quadrant Chart | [quadrantChart.md](references/quadrantChart.md) | Four-quadrant analysis |
|
||||
| Requirement Diagram | [requirementDiagram.md](references/requirementDiagram.md) | Requirements traceability |
|
||||
| C4 Diagram | [c4.md](references/c4.md) | System architecture (C4 model) |
|
||||
| Sankey Diagram | [sankey.md](references/sankey.md) | Flow, conversions |
|
||||
| XY Chart | [xyChart.md](references/xyChart.md) | Line charts, bar charts |
|
||||
| Block Diagram | [block.md](references/block.md) | System components, modules |
|
||||
| Packet Diagram | [packet.md](references/packet.md) | Network protocols, data structures |
|
||||
| Kanban | [kanban.md](references/kanban.md) | Task management, workflows |
|
||||
| Architecture Diagram | [architecture.md](references/architecture.md) | System architecture |
|
||||
| Radar Chart | [radar.md](references/radar.md) | Multi-dimensional comparison |
|
||||
| Treemap | [treemap.md](references/treemap.md) | Hierarchical data visualization |
|
||||
| User Journey | [userJourney.md](references/userJourney.md) | User experience flows |
|
||||
| ZenUML | [zenuml.md](references/zenuml.md) | Sequence diagrams (code style) |
|
||||
|
||||
## Configuration & Themes
|
||||
|
||||
- [Theming](references/config-theming.md) - Custom colors and styles
|
||||
- [Directives](references/config-directives.md) - Diagram-level configuration
|
||||
- [Layouts](references/config-layouts.md) - Layout direction and spacing
|
||||
- [Configuration](references/config-configuration.md) - Global settings
|
||||
- [Math](references/config-math.md) - LaTeX math support
|
||||
|
||||
## Output Specification
|
||||
|
||||
Generated Mermaid code should:
|
||||
|
||||
1. Be wrapped in ```mermaid code blocks
|
||||
2. Have correct syntax that renders directly
|
||||
3. Have clear structure with proper line breaks and indentation
|
||||
4. Use semantic node naming
|
||||
5. Include styling when needed to improve visual appearance
|
||||
|
||||
## Example Output
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Start] --> B{Condition}
|
||||
B -->|Yes| C[Execute]
|
||||
B -->|No| D[End]
|
||||
C --> D
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
User requirements: $ARGUMENTS
|
||||
@@ -0,0 +1,227 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/architecture.md](../../packages/mermaid/src/docs/syntax/architecture.md).
|
||||
|
||||
# Architecture Diagrams Documentation (v11.1.0+)
|
||||
|
||||
> In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.
|
||||
|
||||
## Example
|
||||
|
||||
```mermaid-example
|
||||
architecture-beta
|
||||
group api(cloud)[API]
|
||||
|
||||
service db(database)[Database] in api
|
||||
service disk1(disk)[Storage] in api
|
||||
service disk2(disk)[Storage] in api
|
||||
service server(server)[Server] in api
|
||||
|
||||
db:L -- R:server
|
||||
disk1:T -- B:server
|
||||
disk2:T -- B:db
|
||||
```
|
||||
|
||||
```mermaid
|
||||
architecture-beta
|
||||
group api(cloud)[API]
|
||||
|
||||
service db(database)[Database] in api
|
||||
service disk1(disk)[Storage] in api
|
||||
service disk2(disk)[Storage] in api
|
||||
service server(server)[Server] in api
|
||||
|
||||
db:L -- R:server
|
||||
disk1:T -- B:server
|
||||
disk2:T -- B:db
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
The building blocks of an architecture are `groups`, `services`, `edges`, and `junctions`.
|
||||
|
||||
For supporting components, icons are declared by surrounding the icon name with `()`, while labels are declared by surrounding the text with `[]`.
|
||||
|
||||
To begin an architecture diagram, use the keyword `architecture-beta`, followed by your groups, services, edges, and junctions. While each of the 3 building blocks can be declared in any order, care must be taken to ensure the identifier was previously declared by another component.
|
||||
|
||||
### Groups
|
||||
|
||||
The syntax for declaring a group is:
|
||||
|
||||
```
|
||||
group {group id}({icon name})[{title}] (in {parent id})?
|
||||
```
|
||||
|
||||
Put together:
|
||||
|
||||
```
|
||||
group public_api(cloud)[Public API]
|
||||
```
|
||||
|
||||
creates a group identified as `public_api`, uses the icon `cloud`, and has the label `Public API`.
|
||||
|
||||
Additionally, groups can be placed within a group using the optional `in` keyword
|
||||
|
||||
```
|
||||
group private_api(cloud)[Private API] in public_api
|
||||
```
|
||||
|
||||
### Services
|
||||
|
||||
The syntax for declaring a service is:
|
||||
|
||||
```
|
||||
service {service id}({icon name})[{title}] (in {parent id})?
|
||||
```
|
||||
|
||||
Put together:
|
||||
|
||||
```
|
||||
service database1(database)[My Database]
|
||||
```
|
||||
|
||||
creates the service identified as `database1`, using the icon `database`, with the label `My Database`.
|
||||
|
||||
If the service belongs to a group, it can be placed inside it through the optional `in` keyword
|
||||
|
||||
```
|
||||
service database1(database)[My Database] in private_api
|
||||
```
|
||||
|
||||
### Edges
|
||||
|
||||
The syntax for declaring an edge is:
|
||||
|
||||
```
|
||||
{serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?
|
||||
```
|
||||
|
||||
#### Edge Direction
|
||||
|
||||
The side of the service the edge comes out of is specified by adding a colon (`:`) to the side of the service connecting to the arrow and adding `L|R|T|B`
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
db:R -- L:server
|
||||
```
|
||||
|
||||
creates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`.
|
||||
|
||||
```
|
||||
db:T -- L:server
|
||||
```
|
||||
|
||||
creates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`.
|
||||
|
||||
#### Arrows
|
||||
|
||||
Arrows can be added to each side of an edge by adding `<` before the direction on the left, and/or `>` after the direction on the right.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
subnet:R --> L:gateway
|
||||
```
|
||||
|
||||
creates an edge with the arrow going into the `gateway` service
|
||||
|
||||
#### Edges out of Groups
|
||||
|
||||
To have an edge go from a group to another group or service within another group, the `{group}` modifier can be added after the `serviceId`.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
service server[Server] in groupOne
|
||||
service subnet[Subnet] in groupTwo
|
||||
|
||||
server{group}:B --> T:subnet{group}
|
||||
```
|
||||
|
||||
creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`.
|
||||
|
||||
It's important to note that `groupId`s cannot be used for specifying edges and the `{group}` modifier can only be used for services within a group.
|
||||
|
||||
### Junctions
|
||||
|
||||
Junctions are a special type of node which acts as a potential 4-way split between edges.
|
||||
|
||||
The syntax for declaring a junction is:
|
||||
|
||||
```
|
||||
junction {junction id} (in {parent id})?
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
architecture-beta
|
||||
service left_disk(disk)[Disk]
|
||||
service top_disk(disk)[Disk]
|
||||
service bottom_disk(disk)[Disk]
|
||||
service top_gateway(internet)[Gateway]
|
||||
service bottom_gateway(internet)[Gateway]
|
||||
junction junctionCenter
|
||||
junction junctionRight
|
||||
|
||||
left_disk:R -- L:junctionCenter
|
||||
top_disk:B -- T:junctionCenter
|
||||
bottom_disk:T -- B:junctionCenter
|
||||
junctionCenter:R -- L:junctionRight
|
||||
top_gateway:B -- T:junctionRight
|
||||
bottom_gateway:T -- B:junctionRight
|
||||
```
|
||||
|
||||
```mermaid
|
||||
architecture-beta
|
||||
service left_disk(disk)[Disk]
|
||||
service top_disk(disk)[Disk]
|
||||
service bottom_disk(disk)[Disk]
|
||||
service top_gateway(internet)[Gateway]
|
||||
service bottom_gateway(internet)[Gateway]
|
||||
junction junctionCenter
|
||||
junction junctionRight
|
||||
|
||||
left_disk:R -- L:junctionCenter
|
||||
top_disk:B -- T:junctionCenter
|
||||
bottom_disk:T -- B:junctionCenter
|
||||
junctionCenter:R -- L:junctionRight
|
||||
top_gateway:B -- T:junctionRight
|
||||
bottom_gateway:T -- B:junctionRight
|
||||
```
|
||||
|
||||
## Icons
|
||||
|
||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||
Users can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).
|
||||
|
||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||
|
||||
```mermaid-example
|
||||
architecture-beta
|
||||
group api(logos:aws-lambda)[API]
|
||||
|
||||
service db(logos:aws-aurora)[Database] in api
|
||||
service disk1(logos:aws-glacier)[Storage] in api
|
||||
service disk2(logos:aws-s3)[Storage] in api
|
||||
service server(logos:aws-ec2)[Server] in api
|
||||
|
||||
db:L -- R:server
|
||||
disk1:T -- B:server
|
||||
disk2:T -- B:db
|
||||
```
|
||||
|
||||
```mermaid
|
||||
architecture-beta
|
||||
group api(logos:aws-lambda)[API]
|
||||
|
||||
service db(logos:aws-aurora)[Database] in api
|
||||
service disk1(logos:aws-glacier)[Storage] in api
|
||||
service disk2(logos:aws-s3)[Storage] in api
|
||||
service server(logos:aws-ec2)[Server] in api
|
||||
|
||||
db:L -- R:server
|
||||
disk1:T -- B:server
|
||||
disk2:T -- B:db
|
||||
```
|
||||
@@ -0,0 +1,753 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/block.md](../../packages/mermaid/src/docs/syntax/block.md).
|
||||
|
||||
# Block Diagrams Documentation
|
||||
|
||||
## Introduction to Block Diagrams
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
columns 1
|
||||
db(("DB"))
|
||||
blockArrowId6<[" "]>(down)
|
||||
block:ID
|
||||
A
|
||||
B["A wide one in the middle"]
|
||||
C
|
||||
end
|
||||
space
|
||||
D
|
||||
ID --> D
|
||||
C --> D
|
||||
style B fill:#969,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
columns 1
|
||||
db(("DB"))
|
||||
blockArrowId6<[" "]>(down)
|
||||
block:ID
|
||||
A
|
||||
B["A wide one in the middle"]
|
||||
C
|
||||
end
|
||||
space
|
||||
D
|
||||
ID --> D
|
||||
C --> D
|
||||
style B fill:#969,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
### Definition and Purpose
|
||||
|
||||
Block diagrams are an intuitive and efficient way to represent complex systems, processes, or architectures visually. They are composed of blocks and connectors, where blocks represent the fundamental components or functions, and connectors show the relationship or flow between these components. This method of diagramming is essential in various fields such as engineering, software development, and process management.
|
||||
|
||||
The primary purpose of block diagrams is to provide a high-level view of a system, allowing for easy understanding and analysis without delving into the intricate details of each component. This makes them particularly useful for simplifying complex systems and for explaining the overall structure and interaction of components within a system.
|
||||
|
||||
Many people use mermaid flowcharts for this purpose. A side-effect of this is that the automatic layout sometimes move shapes to positions that the diagram maker does not want. Block diagrams use a different approach. In this diagram we give the author full control over where the shapes are positioned.
|
||||
|
||||
### General Use Cases
|
||||
|
||||
Block diagrams have a wide range of applications across various industries and disciplines. Some of the key use cases include:
|
||||
|
||||
- **Software Architecture**: In software development, block diagrams can be used to illustrate the architecture of a software application. This includes showing how different modules or services interact, data flow, and high-level component interaction.
|
||||
|
||||
- **Network Diagrams**: Block diagrams are ideal for representing network architectures in IT and telecommunications. They can depict how different network devices and services are interconnected, including routers, switches, firewalls, and the flow of data across the network.
|
||||
|
||||
- **Process Flowcharts**: In business and manufacturing, block diagrams can be employed to create process flowcharts. These flowcharts represent various stages of a business or manufacturing process, helping to visualize the sequence of steps, decision points, and the flow of control.
|
||||
|
||||
- **Electrical Systems**: Engineers use block diagrams to represent electrical systems and circuitry. They can illustrate the high-level structure of an electrical system, the interaction between different electrical components, and the flow of electrical currents.
|
||||
|
||||
- **Educational Purposes**: Block diagrams are also extensively used in educational materials to explain complex concepts and systems in a simplified manner. They help in breaking down and visualizing scientific theories, engineering principles, and technological systems.
|
||||
|
||||
These examples demonstrate the versatility of block diagrams in providing clear and concise representations of complex systems. Their simplicity and clarity make them a valuable tool for professionals across various fields to communicate complex ideas effectively.
|
||||
|
||||
In the following sections, we will delve into the specifics of creating and manipulating block diagrams using Mermaid, covering everything from basic syntax to advanced configurations and styling.
|
||||
|
||||
Creating block diagrams with Mermaid is straightforward and accessible. This section introduces the basic syntax and structure needed to start building simple diagrams. Understanding these foundational concepts is key to efficiently utilizing Mermaid for more complex diagramming tasks.
|
||||
|
||||
### Simple Block Diagrams
|
||||
|
||||
#### Basic Structure
|
||||
|
||||
At its core, a block diagram consists of blocks representing different entities or components. In Mermaid, these blocks are easily created using simple text labels. The most basic form of a block diagram can be a series of blocks without any connectors.
|
||||
|
||||
**Example - Simple Block Diagram**:
|
||||
To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
a b c
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
a b c
|
||||
```
|
||||
|
||||
This example will produce a horizontal sequence of three blocks. Each block is automatically spaced and aligned for optimal readability.
|
||||
|
||||
### Defining the number of columns to use
|
||||
|
||||
#### Column Usage
|
||||
|
||||
While simple block diagrams are linear and straightforward, more complex systems may require a structured layout. Mermaid allows for the organization of blocks into multiple columns, facilitating the creation of more intricate and detailed diagrams.
|
||||
|
||||
**Example - Multi-Column Diagram:**
|
||||
In scenarios where you need to distribute blocks across multiple columns, you can specify the number of columns and arrange the blocks accordingly. Here's how to create a block diagram with three columns and four blocks, where the fourth block appears in a second row:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
columns 3
|
||||
a b c d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
columns 3
|
||||
a b c d
|
||||
```
|
||||
|
||||
This syntax instructs Mermaid to arrange the blocks 'a', 'b', 'c', and 'd' across three columns, wrapping to the next row as needed. This feature is particularly useful for representing layered or multi-tiered systems, such as network layers or hierarchical structures.
|
||||
|
||||
These basic building blocks of Mermaid's block diagrams provide a foundation for more complex diagramming. The simplicity of the syntax allows for quick creation and iteration of diagrams, making it an efficient tool for visualizing ideas and concepts. In the next section, we'll explore advanced block configuration options, including setting block widths and creating composite blocks.
|
||||
|
||||
## 3. Advanced Block Configuration
|
||||
|
||||
Building upon the basics, this section delves into more advanced features of block diagramming in Mermaid. These features allow for greater flexibility and complexity in diagram design, accommodating a wider range of use cases and scenarios.
|
||||
|
||||
### Setting Block Width
|
||||
|
||||
#### Spanning Multiple Columns
|
||||
|
||||
In more complex diagrams, you may need blocks that span multiple columns to emphasize certain components or to represent larger entities. Mermaid allows for the adjustment of block widths to cover multiple columns, enhancing the diagram's readability and structure.
|
||||
|
||||
**Example - Block Spanning Multiple Columns**:
|
||||
To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
columns 3
|
||||
a["A label"] b:2 c:2 d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
columns 3
|
||||
a["A label"] b:2 c:2 d
|
||||
```
|
||||
|
||||
In this example, the block labeled "A labels" spans one column, while blocks 'b', 'c' span 2 columns, and 'd' is again allocated its own column. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size.
|
||||
|
||||
### Creating Composite Blocks
|
||||
|
||||
#### Nested Blocks
|
||||
|
||||
Composite blocks, or blocks within blocks, are an advanced feature in Mermaid's block diagram syntax. They allow for the representation of nested or hierarchical systems, where one component encompasses several subcomponents.
|
||||
|
||||
**Example - Composite Blocks:**
|
||||
Creating a composite block involves defining a parent block and then nesting other blocks within it. Here's how to define a composite block with nested elements:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
block
|
||||
D
|
||||
end
|
||||
A["A: I am a wide one"]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
block
|
||||
D
|
||||
end
|
||||
A["A: I am a wide one"]
|
||||
```
|
||||
|
||||
In this syntax, 'D' is a nested block within a larger parent block. This feature is particularly useful for depicting complex structures, such as a server with multiple services or a department within a larger organizational framework.
|
||||
|
||||
### Column Width Dynamics
|
||||
|
||||
#### Adjusting Widths
|
||||
|
||||
Mermaid also allows for dynamic adjustment of column widths based on the content of the blocks. The width of the columns is determined by the widest block in the column, ensuring that the diagram remains balanced and readable.
|
||||
|
||||
**Example - Dynamic Column Widths:**
|
||||
In diagrams with varying block sizes, Mermaid automatically adjusts the column widths to fit the largest block in each column. Here's an example:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
columns 3
|
||||
a:3
|
||||
block:group1:2
|
||||
columns 2
|
||||
h i j k
|
||||
end
|
||||
g
|
||||
block:group2:3
|
||||
%% columns auto (default)
|
||||
l m n o p q r
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
columns 3
|
||||
a:3
|
||||
block:group1:2
|
||||
columns 2
|
||||
h i j k
|
||||
end
|
||||
g
|
||||
block:group2:3
|
||||
%% columns auto (default)
|
||||
l m n o p q r
|
||||
end
|
||||
```
|
||||
|
||||
This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams.
|
||||
|
||||
**Merging Blocks Horizontally:**
|
||||
In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
block
|
||||
columns 1
|
||||
a["A label"] b c d
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
block
|
||||
columns 1
|
||||
a["A label"] b c d
|
||||
end
|
||||
```
|
||||
|
||||
In this example, the width of the merged block dynamically adjusts to the width of the largest child block.
|
||||
|
||||
With these advanced configuration options, Mermaid's block diagrams can be tailored to represent a wide array of complex systems and structures. The flexibility offered by these features enables users to create diagrams that are both informative and visually appealing. In the following sections, we will explore further capabilities, including different block shapes and linking options.
|
||||
|
||||
## 4. Block Varieties and Shapes
|
||||
|
||||
Mermaid's block diagrams are not limited to standard rectangular shapes. A variety of block shapes are available, allowing for a more nuanced and tailored representation of different types of information or entities. This section outlines the different block shapes you can use in Mermaid and their specific applications.
|
||||
|
||||
### Standard and Special Block Shapes
|
||||
|
||||
Mermaid supports a range of block shapes to suit different diagramming needs, from basic geometric shapes to more specialized forms.
|
||||
|
||||
#### Example - Round Edged Block
|
||||
|
||||
To create a block with round edges, which can be used to represent a softer or more flexible component:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1("This is the text in the box")
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1("This is the text in the box")
|
||||
```
|
||||
|
||||
#### Example - Stadium-Shaped Block
|
||||
|
||||
A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1(["This is the text in the box"])
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1(["This is the text in the box"])
|
||||
```
|
||||
|
||||
#### Example - Subroutine Shape
|
||||
|
||||
For representing subroutines or contained processes, a block with double vertical lines is useful:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1[["This is the text in the box"]]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1[["This is the text in the box"]]
|
||||
```
|
||||
|
||||
#### Example - Cylindrical Shape
|
||||
|
||||
The cylindrical shape is ideal for representing databases or storage components:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1[("Database")]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1[("Database")]
|
||||
```
|
||||
|
||||
#### Example - Circle Shape
|
||||
|
||||
A circle can be used for centralized or pivotal components:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1(("This is the text in the circle"))
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1(("This is the text in the circle"))
|
||||
```
|
||||
|
||||
#### Example - Asymmetric, Rhombus, and Hexagon Shapes
|
||||
|
||||
For decision points, use a rhombus, and for unique or specialized processes, asymmetric and hexagon shapes can be utilized:
|
||||
|
||||
**Asymmetric**
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1>"This is the text in the box"]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1>"This is the text in the box"]
|
||||
```
|
||||
|
||||
**Rhombus**
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1{"This is the text in the box"}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1{"This is the text in the box"}
|
||||
```
|
||||
|
||||
**Hexagon**
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1{{"This is the text in the box"}}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1{{"This is the text in the box"}}
|
||||
```
|
||||
|
||||
#### Example - Parallelogram and Trapezoid Shapes
|
||||
|
||||
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1[/"This is the text in the box"/]
|
||||
id2[\"This is the text in the box"\]
|
||||
A[/"Christmas"\]
|
||||
B[\"Go shopping"/]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1[/"This is the text in the box"/]
|
||||
id2[\"This is the text in the box"\]
|
||||
A[/"Christmas"\]
|
||||
B[\"Go shopping"/]
|
||||
```
|
||||
|
||||
#### Example - Double Circle
|
||||
|
||||
For highlighting critical or high-priority components, a double circle can be effective:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1((("This is the text in the circle")))
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1((("This is the text in the circle")))
|
||||
```
|
||||
|
||||
### Block Arrows and Space Blocks
|
||||
|
||||
Mermaid also offers unique shapes like block arrows and space blocks for directional flow and spacing.
|
||||
|
||||
#### Example - Block Arrows
|
||||
|
||||
Block arrows can visually indicate direction or flow within a process:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
blockArrowId<["Label"]>(right)
|
||||
blockArrowId2<["Label"]>(left)
|
||||
blockArrowId3<["Label"]>(up)
|
||||
blockArrowId4<["Label"]>(down)
|
||||
blockArrowId5<["Label"]>(x)
|
||||
blockArrowId6<["Label"]>(y)
|
||||
blockArrowId7<["Label"]>(x, down)
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
blockArrowId<["Label"]>(right)
|
||||
blockArrowId2<["Label"]>(left)
|
||||
blockArrowId3<["Label"]>(up)
|
||||
blockArrowId4<["Label"]>(down)
|
||||
blockArrowId5<["Label"]>(x)
|
||||
blockArrowId6<["Label"]>(y)
|
||||
blockArrowId7<["Label"]>(x, down)
|
||||
```
|
||||
|
||||
#### Example - Space Blocks
|
||||
|
||||
Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
columns 3
|
||||
a space b
|
||||
c d e
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
columns 3
|
||||
a space b
|
||||
c d e
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
ida space:3 idb idc
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
ida space:3 idb idc
|
||||
```
|
||||
|
||||
Note that you can set how many columns the space block occupied using the number notation `space:num` where num is a number indicating the num columns width. You can also use `space` which defaults to one column.
|
||||
|
||||
The variety of shapes and special blocks in Mermaid enhances the expressive power of block diagrams, allowing for more accurate and context-specific representations. These options give users the flexibility to create diagrams that are both informative and visually appealing. In the next sections, we will explore the ways to connect these blocks and customize their appearance.
|
||||
|
||||
### Standard and Special Block Shapes
|
||||
|
||||
Discuss the various shapes available for blocks, including standard shapes and special forms like block arrows and space blocks.
|
||||
|
||||
## 5. Connecting Blocks with Edges
|
||||
|
||||
One of the key features of block diagrams in Mermaid is the ability to connect blocks using various types of edges or links. This section explores the different ways blocks can be interconnected to represent relationships and flows between components.
|
||||
|
||||
### Basic Linking and Arrow Types
|
||||
|
||||
The most fundamental aspect of connecting blocks is the use of arrows or links. These connectors depict the relationships or the flow of information between the blocks. Mermaid offers a range of arrow types to suit different diagramming needs.
|
||||
|
||||
**Example - Basic Links**
|
||||
|
||||
A simple link with an arrow can be created to show direction or flow from one block to another:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
A space B
|
||||
A-->B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
A space B
|
||||
A-->B
|
||||
```
|
||||
|
||||
This example illustrates a direct connection from block 'A' to block 'B', using a straightforward arrow.
|
||||
|
||||
This syntax creates a line connecting 'A' and 'B', implying a relationship or connection without indicating a specific direction.
|
||||
|
||||
### Text on Links
|
||||
|
||||
In addition to connecting blocks, it's often necessary to describe or label the relationship. Mermaid allows for the inclusion of text on links, providing context to the connections.
|
||||
|
||||
Example - Text with Links
|
||||
To add text to a link, the syntax includes the text within the link definition:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
A space:2 B
|
||||
A-- "X" -->B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
A space:2 B
|
||||
A-- "X" -->B
|
||||
```
|
||||
|
||||
This example show how to add descriptive text to the links, enhancing the information conveyed by the diagram.
|
||||
|
||||
Example - Edges and Styles:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
columns 1
|
||||
db(("DB"))
|
||||
blockArrowId6<[" "]>(down)
|
||||
block:ID
|
||||
A
|
||||
B["A wide one in the middle"]
|
||||
C
|
||||
end
|
||||
space
|
||||
D
|
||||
ID --> D
|
||||
C --> D
|
||||
style B fill:#939,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
columns 1
|
||||
db(("DB"))
|
||||
blockArrowId6<[" "]>(down)
|
||||
block:ID
|
||||
A
|
||||
B["A wide one in the middle"]
|
||||
C
|
||||
end
|
||||
space
|
||||
D
|
||||
ID --> D
|
||||
C --> D
|
||||
style B fill:#939,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
## 6. Styling and Customization
|
||||
|
||||
Beyond the structure and layout of block diagrams, Mermaid offers extensive styling options. These customization features allow for the creation of more visually distinctive and informative diagrams. This section covers how to apply individual styles to blocks and how to use classes for consistent styling across multiple elements.
|
||||
|
||||
### Individual Block Styling
|
||||
|
||||
Mermaid enables detailed styling of individual blocks, allowing you to apply various CSS properties such as color, stroke, and border thickness. This feature is especially useful for highlighting specific parts of a diagram or for adhering to certain visual themes.
|
||||
|
||||
#### Example - Styling a Single Block
|
||||
|
||||
To apply custom styles to a block, you can use the `style` keyword followed by the block identifier and the desired CSS properties:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
id1 space id2
|
||||
id1("Start")-->id2("Stop")
|
||||
style id1 fill:#636,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
id1 space id2
|
||||
id1("Start")-->id2("Stop")
|
||||
style id1 fill:#636,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
### Class Styling
|
||||
|
||||
Mermaid enables applying styling to classes, which could make styling easier if you want to apply a certain set of styles to multiple elements, as you could just link those elements to a class.
|
||||
|
||||
#### Example - Styling a Single Class
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
A space B
|
||||
A-->B
|
||||
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
|
||||
class A blue
|
||||
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
A space B
|
||||
A-->B
|
||||
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
|
||||
class A blue
|
||||
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
In this example, a class named 'blue' is defined and applied to block 'A', while block 'B' receives individual styling. This demonstrates the flexibility of Mermaid in applying both shared and unique styles within the same diagram.
|
||||
|
||||
The ability to style blocks individually or through classes provides a powerful tool for enhancing the visual impact and clarity of block diagrams. Whether emphasizing certain elements or maintaining a cohesive design across the diagram, these styling capabilities are central to effective diagramming. The next sections will present practical examples and use cases, followed by tips for troubleshooting common issues.
|
||||
|
||||
### 7. Practical Examples and Use Cases
|
||||
|
||||
The versatility of Mermaid's block diagrams becomes evident when applied to real-world scenarios. This section provides practical examples demonstrating the application of various features discussed in previous sections. These examples showcase how block diagrams can be used to represent complex systems and processes in an accessible and informative manner.
|
||||
|
||||
### Detailed Examples Illustrating Various Features
|
||||
|
||||
Combining the elements of structure, linking, and styling, we can create comprehensive diagrams that serve specific purposes in different contexts.
|
||||
|
||||
#### Example - System Architecture
|
||||
|
||||
Illustrating a simple software system architecture with interconnected components:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
columns 3
|
||||
Frontend blockArrowId6<[" "]>(right) Backend
|
||||
space:2 down<[" "]>(down)
|
||||
Disk left<[" "]>(left) Database[("Database")]
|
||||
|
||||
classDef front fill:#696,stroke:#333;
|
||||
classDef back fill:#969,stroke:#333;
|
||||
class Frontend front
|
||||
class Backend,Database back
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
columns 3
|
||||
Frontend blockArrowId6<[" "]>(right) Backend
|
||||
space:2 down<[" "]>(down)
|
||||
Disk left<[" "]>(left) Database[("Database")]
|
||||
|
||||
classDef front fill:#696,stroke:#333;
|
||||
classDef back fill:#969,stroke:#333;
|
||||
class Frontend front
|
||||
class Backend,Database back
|
||||
```
|
||||
|
||||
This example shows a basic architecture with a frontend, backend, and database. The blocks are styled to differentiate between types of components.
|
||||
|
||||
#### Example - Business Process Flow
|
||||
|
||||
Representing a business process flow with decision points and multiple stages:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
columns 3
|
||||
Start(("Start")) space:2
|
||||
down<[" "]>(down) space:2
|
||||
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
|
||||
downAgain<["No"]>(down) space r3<["Done"]>(down)
|
||||
Process2["Process B"] r2<["Done"]>(right) End(("End"))
|
||||
|
||||
style Start fill:#969;
|
||||
style End fill:#696;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
columns 3
|
||||
Start(("Start")) space:2
|
||||
down<[" "]>(down) space:2
|
||||
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
|
||||
downAgain<["No"]>(down) space r3<["Done"]>(down)
|
||||
Process2["Process B"] r2<["Done"]>(right) End(("End"))
|
||||
|
||||
style Start fill:#969;
|
||||
style End fill:#696;
|
||||
```
|
||||
|
||||
These practical examples and scenarios underscore the utility of Mermaid block diagrams in simplifying and effectively communicating complex information across various domains.
|
||||
|
||||
The next section, 'Troubleshooting and Common Issues', will provide insights into resolving common challenges encountered when working with Mermaid block diagrams, ensuring a smooth diagramming experience.
|
||||
|
||||
## 8. Troubleshooting and Common Issues
|
||||
|
||||
Working with Mermaid block diagrams can sometimes present challenges, especially as the complexity of the diagrams increases. This section aims to provide guidance on resolving common issues and offers tips for managing more intricate diagram structures.
|
||||
|
||||
### Common Syntax Errors
|
||||
|
||||
Understanding and avoiding common syntax errors is key to a smooth experience with Mermaid diagrams.
|
||||
|
||||
#### Example - Incorrect Linking
|
||||
|
||||
A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
|
||||
|
||||
```
|
||||
block
|
||||
A - B
|
||||
```
|
||||
|
||||
**Correction**:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
A space B
|
||||
A --> B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
A space B
|
||||
A --> B
|
||||
```
|
||||
|
||||
#### Example - Misplaced Styling
|
||||
|
||||
Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
A
|
||||
style A fill#969;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
A
|
||||
style A fill#969;
|
||||
```
|
||||
|
||||
**Correction:**
|
||||
Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
|
||||
|
||||
```mermaid-example
|
||||
block
|
||||
A
|
||||
style A fill:#969,stroke:#333;
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
block
|
||||
A
|
||||
style A fill:#969,stroke:#333;
|
||||
|
||||
```
|
||||
|
||||
### Tips for Complex Diagram Structures
|
||||
|
||||
Managing complexity in Mermaid diagrams involves planning and employing best practices.
|
||||
|
||||
#### Modular Design
|
||||
|
||||
Break down complex diagrams into smaller, more manageable components. This approach not only makes the diagram easier to understand but also simplifies the creation and maintenance process.
|
||||
|
||||
#### Consistent Styling
|
||||
|
||||
Use classes to maintain consistent styling across similar elements. This not only saves time but also ensures a cohesive and professional appearance.
|
||||
|
||||
#### Comments and Documentation
|
||||
|
||||
Use comments with `%%` within the Mermaid syntax to document the purpose of various parts of the diagram. This practice is invaluable for maintaining clarity, especially when working in teams or returning to a diagram after some time.
|
||||
|
||||
With these troubleshooting tips and best practices, you can effectively manage and resolve common issues in Mermaid block diagrams. The final section, 'Conclusion', will summarize the key points covered in this documentation and invite user feedback for continuous improvement.
|
||||
@@ -0,0 +1,619 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4.md](../../packages/mermaid/src/docs/syntax/c4.md).
|
||||
|
||||
# C4 Diagrams
|
||||
|
||||
> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
|
||||
|
||||
Mermaid's C4 diagram syntax is compatible with plantUML. See example below:
|
||||
|
||||
```mermaid-example
|
||||
C4Context
|
||||
title System Context diagram for Internet Banking System
|
||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||
Person(customerB, "Banking Customer B")
|
||||
Person_Ext(customerC, "Banking Customer C", "desc")
|
||||
|
||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
||||
|
||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
Enterprise_Boundary(b1, "BankBoundary") {
|
||||
|
||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
System_Boundary(b2, "BankBoundary2") {
|
||||
System(SystemA, "Banking System A")
|
||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
|
||||
}
|
||||
|
||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
||||
|
||||
Boundary(b3, "BankBoundary3", "boundary") {
|
||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
|
||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BiRel(customerA, SystemAA, "Uses")
|
||||
BiRel(SystemAA, SystemE, "Uses")
|
||||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||||
Rel(SystemC, customerA, "Sends e-mails to")
|
||||
|
||||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
C4Context
|
||||
title System Context diagram for Internet Banking System
|
||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||
Person(customerB, "Banking Customer B")
|
||||
Person_Ext(customerC, "Banking Customer C", "desc")
|
||||
|
||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
||||
|
||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
Enterprise_Boundary(b1, "BankBoundary") {
|
||||
|
||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
System_Boundary(b2, "BankBoundary2") {
|
||||
System(SystemA, "Banking System A")
|
||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
|
||||
}
|
||||
|
||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
||||
|
||||
Boundary(b3, "BankBoundary3", "boundary") {
|
||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
|
||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BiRel(customerA, SystemAA, "Uses")
|
||||
BiRel(SystemAA, SystemE, "Uses")
|
||||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||||
Rel(SystemC, customerA, "Sends e-mails to")
|
||||
|
||||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
|
||||
|
||||
```
|
||||
|
||||
For an example, see the source code demos/index.html
|
||||
|
||||
5 types of C4 charts are supported.
|
||||
|
||||
- System Context (C4Context)
|
||||
- Container diagram (C4Container)
|
||||
- Component diagram (C4Component)
|
||||
- Dynamic diagram (C4Dynamic)
|
||||
- Deployment diagram (C4Deployment)
|
||||
|
||||
Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the C4 diagram.
|
||||
|
||||
C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
|
||||
updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.
|
||||
|
||||
The layout does not use a fully automated layout algorithm. The position of shapes is adjusted by changing the order in which statements are written. So there is no plan to support the following Layout statements.
|
||||
The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
|
||||
|
||||
- Layout
|
||||
- Lay_U, Lay_Up
|
||||
- Lay_D, Lay_Down
|
||||
- Lay_L, Lay_Left
|
||||
- Lay_R, Lay_Right
|
||||
|
||||
The following unfinished features are not supported in the short term.
|
||||
|
||||
- [ ] sprite
|
||||
|
||||
- [ ] tags
|
||||
|
||||
- [ ] link
|
||||
|
||||
- [ ] Legend
|
||||
|
||||
- [x] System Context
|
||||
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] Person_Ext
|
||||
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] SystemDb
|
||||
- [x] SystemQueue
|
||||
- [x] System_Ext
|
||||
- [x] SystemDb_Ext
|
||||
- [x] SystemQueue_Ext
|
||||
- [x] Boundary(alias, label, ?type, ?tags, $link)
|
||||
- [x] Enterprise_Boundary(alias, label, ?tags, $link)
|
||||
- [x] System_Boundary
|
||||
|
||||
- [x] Container diagram
|
||||
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] ContainerDb
|
||||
- [x] ContainerQueue
|
||||
- [x] Container_Ext
|
||||
- [x] ContainerDb_Ext
|
||||
- [x] ContainerQueue_Ext
|
||||
- [x] Container_Boundary(alias, label, ?tags, $link)
|
||||
|
||||
- [x] Component diagram
|
||||
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] ComponentDb
|
||||
- [x] ComponentQueue
|
||||
- [x] Component_Ext
|
||||
- [x] ComponentDb_Ext
|
||||
- [x] ComponentQueue_Ext
|
||||
|
||||
- [x] Dynamic diagram
|
||||
- [x] RelIndex(index, from, to, label, ?tags, $link)
|
||||
|
||||
- [x] Deployment diagram
|
||||
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
||||
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
||||
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
||||
|
||||
- [x] Relationship Types
|
||||
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||
- [x] BiRel (bidirectional relationship)
|
||||
- [x] Rel_U, Rel_Up
|
||||
- [x] Rel_D, Rel_Down
|
||||
- [x] Rel_L, Rel_Left
|
||||
- [x] Rel_R, Rel_Right
|
||||
- [x] Rel_Back
|
||||
- [x] RelIndex \* Compatible with C4-PlantUML syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
|
||||
|
||||
- [ ] Custom tags/stereotypes support and skin param updates
|
||||
- [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
|
||||
- [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
|
||||
- [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
|
||||
- [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
|
||||
- [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
|
||||
- [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
|
||||
- [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
|
||||
- [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
|
||||
- [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
|
||||
- [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
|
||||
|
||||
There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
|
||||
|
||||
Example: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)
|
||||
|
||||
```
|
||||
UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
|
||||
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
|
||||
UpdateRelStyle(customerA, bankA, $offsetY="60")
|
||||
|
||||
```
|
||||
|
||||
## C4 System Context Diagram (C4Context)
|
||||
|
||||
```mermaid-example
|
||||
C4Context
|
||||
title System Context diagram for Internet Banking System
|
||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||
Person(customerB, "Banking Customer B")
|
||||
Person_Ext(customerC, "Banking Customer C", "desc")
|
||||
|
||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
||||
|
||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
Enterprise_Boundary(b1, "BankBoundary") {
|
||||
|
||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
System_Boundary(b2, "BankBoundary2") {
|
||||
System(SystemA, "Banking System A")
|
||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
|
||||
}
|
||||
|
||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
||||
|
||||
Boundary(b3, "BankBoundary3", "boundary") {
|
||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
|
||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BiRel(customerA, SystemAA, "Uses")
|
||||
BiRel(SystemAA, SystemE, "Uses")
|
||||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||||
Rel(SystemC, customerA, "Sends e-mails to")
|
||||
|
||||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
C4Context
|
||||
title System Context diagram for Internet Banking System
|
||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
|
||||
Person(customerB, "Banking Customer B")
|
||||
Person_Ext(customerC, "Banking Customer C", "desc")
|
||||
|
||||
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
|
||||
|
||||
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
|
||||
|
||||
Enterprise_Boundary(b1, "BankBoundary") {
|
||||
|
||||
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
System_Boundary(b2, "BankBoundary2") {
|
||||
System(SystemA, "Banking System A")
|
||||
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
|
||||
}
|
||||
|
||||
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
|
||||
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
|
||||
|
||||
Boundary(b3, "BankBoundary3", "boundary") {
|
||||
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
|
||||
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BiRel(customerA, SystemAA, "Uses")
|
||||
BiRel(SystemAA, SystemE, "Uses")
|
||||
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
|
||||
Rel(SystemC, customerA, "Sends e-mails to")
|
||||
|
||||
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
|
||||
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
|
||||
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
|
||||
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
|
||||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
|
||||
```
|
||||
|
||||
## C4 Container diagram (C4Container)
|
||||
|
||||
```mermaid-example
|
||||
C4Container
|
||||
title Container diagram for Internet Banking System
|
||||
|
||||
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
|
||||
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
|
||||
|
||||
Container_Boundary(c1, "Internet Banking") {
|
||||
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
|
||||
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
|
||||
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
|
||||
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
|
||||
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
|
||||
|
||||
}
|
||||
|
||||
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
Rel(customer, web_app, "Uses", "HTTPS")
|
||||
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
|
||||
Rel(customer, spa, "Uses", "HTTPS")
|
||||
UpdateRelStyle(customer, spa, $offsetY="-40")
|
||||
Rel(customer, mobile_app, "Uses")
|
||||
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
|
||||
|
||||
Rel(web_app, spa, "Delivers")
|
||||
UpdateRelStyle(web_app, spa, $offsetX="130")
|
||||
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
|
||||
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
|
||||
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
|
||||
|
||||
Rel(email_system, customer, "Sends e-mails to")
|
||||
UpdateRelStyle(email_system, customer, $offsetX="-45")
|
||||
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
|
||||
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
|
||||
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
|
||||
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
C4Container
|
||||
title Container diagram for Internet Banking System
|
||||
|
||||
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
|
||||
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
|
||||
|
||||
Container_Boundary(c1, "Internet Banking") {
|
||||
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
|
||||
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
|
||||
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
|
||||
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
|
||||
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
|
||||
|
||||
}
|
||||
|
||||
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
Rel(customer, web_app, "Uses", "HTTPS")
|
||||
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
|
||||
Rel(customer, spa, "Uses", "HTTPS")
|
||||
UpdateRelStyle(customer, spa, $offsetY="-40")
|
||||
Rel(customer, mobile_app, "Uses")
|
||||
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
|
||||
|
||||
Rel(web_app, spa, "Delivers")
|
||||
UpdateRelStyle(web_app, spa, $offsetX="130")
|
||||
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
|
||||
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
|
||||
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
|
||||
|
||||
Rel(email_system, customer, "Sends e-mails to")
|
||||
UpdateRelStyle(email_system, customer, $offsetX="-45")
|
||||
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
|
||||
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
|
||||
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
|
||||
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
|
||||
|
||||
```
|
||||
|
||||
## C4 Component diagram (C4Component)
|
||||
|
||||
```mermaid-example
|
||||
C4Component
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
Container_Boundary(api, "API Application") {
|
||||
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
|
||||
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
|
||||
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
|
||||
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
|
||||
|
||||
Rel(sign, security, "Uses")
|
||||
Rel(accounts, mbsfacade, "Uses")
|
||||
Rel(security, db, "Read & write to", "JDBC")
|
||||
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
|
||||
}
|
||||
|
||||
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
|
||||
Rel(spa, accounts, "Uses", "JSON/HTTPS")
|
||||
|
||||
Rel(ma, sign, "Uses", "JSON/HTTPS")
|
||||
Rel(ma, accounts, "Uses", "JSON/HTTPS")
|
||||
|
||||
UpdateRelStyle(spa, sign, $offsetY="-40")
|
||||
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
|
||||
|
||||
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
|
||||
UpdateRelStyle(ma, accounts, $offsetY="-40")
|
||||
|
||||
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
|
||||
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
|
||||
UpdateRelStyle(security, db, $offsetY="-40")
|
||||
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
C4Component
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
Container_Boundary(api, "API Application") {
|
||||
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
|
||||
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
|
||||
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
|
||||
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
|
||||
|
||||
Rel(sign, security, "Uses")
|
||||
Rel(accounts, mbsfacade, "Uses")
|
||||
Rel(security, db, "Read & write to", "JDBC")
|
||||
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
|
||||
}
|
||||
|
||||
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
|
||||
Rel(spa, accounts, "Uses", "JSON/HTTPS")
|
||||
|
||||
Rel(ma, sign, "Uses", "JSON/HTTPS")
|
||||
Rel(ma, accounts, "Uses", "JSON/HTTPS")
|
||||
|
||||
UpdateRelStyle(spa, sign, $offsetY="-40")
|
||||
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
|
||||
|
||||
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
|
||||
UpdateRelStyle(ma, accounts, $offsetY="-40")
|
||||
|
||||
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
|
||||
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
|
||||
UpdateRelStyle(security, db, $offsetY="-40")
|
||||
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
|
||||
|
||||
```
|
||||
|
||||
## C4 Dynamic diagram (C4Dynamic)
|
||||
|
||||
```mermaid-example
|
||||
C4Dynamic
|
||||
title Dynamic diagram for Internet Banking System - API Application
|
||||
|
||||
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
|
||||
Container_Boundary(b, "API Application") {
|
||||
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
|
||||
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
|
||||
}
|
||||
Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
|
||||
Rel(c2, c3, "Calls isAuthenticated() on")
|
||||
Rel(c3, c4, "select * from users where username = ?", "JDBC")
|
||||
|
||||
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
|
||||
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
|
||||
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
C4Dynamic
|
||||
title Dynamic diagram for Internet Banking System - API Application
|
||||
|
||||
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
|
||||
Container_Boundary(b, "API Application") {
|
||||
Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
|
||||
Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
|
||||
}
|
||||
Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
|
||||
Rel(c2, c3, "Calls isAuthenticated() on")
|
||||
Rel(c3, c4, "select * from users where username = ?", "JDBC")
|
||||
|
||||
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
|
||||
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
|
||||
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
|
||||
|
||||
```
|
||||
|
||||
## C4 Deployment diagram (C4Deployment)
|
||||
|
||||
```mermaid-example
|
||||
C4Deployment
|
||||
title Deployment Diagram for Internet Banking System - Live
|
||||
|
||||
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
|
||||
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
||||
}
|
||||
|
||||
Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
|
||||
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
|
||||
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
|
||||
}
|
||||
}
|
||||
|
||||
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
|
||||
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
|
||||
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
|
||||
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
|
||||
}
|
||||
}
|
||||
Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
|
||||
Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
|
||||
Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
|
||||
}
|
||||
}
|
||||
Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
|
||||
Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
}
|
||||
}
|
||||
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
|
||||
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
|
||||
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
|
||||
Rel(spa, api, "Makes API calls to", "json/HTTPS")
|
||||
Rel_U(web, spa, "Delivers to the customer's web browser")
|
||||
Rel(api, db, "Reads from and writes to", "JDBC")
|
||||
Rel(api, db2, "Reads from and writes to", "JDBC")
|
||||
Rel_R(db, db2, "Replicates data to")
|
||||
|
||||
UpdateRelStyle(spa, api, $offsetY="-40")
|
||||
UpdateRelStyle(web, spa, $offsetY="-40")
|
||||
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
|
||||
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
|
||||
UpdateRelStyle(db, db2, $offsetY="-10")
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
C4Deployment
|
||||
title Deployment Diagram for Internet Banking System - Live
|
||||
|
||||
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
|
||||
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
|
||||
}
|
||||
|
||||
Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
|
||||
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
|
||||
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
|
||||
}
|
||||
}
|
||||
|
||||
Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
|
||||
Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
|
||||
Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
|
||||
Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
|
||||
}
|
||||
}
|
||||
Deployment_Node(bb2, "bigbank-web*** x4", "Ubuntu 16.04 LTS"){
|
||||
Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
|
||||
Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
|
||||
}
|
||||
}
|
||||
Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
|
||||
Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
}
|
||||
}
|
||||
Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS") {
|
||||
Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c") {
|
||||
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
|
||||
Rel(spa, api, "Makes API calls to", "json/HTTPS")
|
||||
Rel_U(web, spa, "Delivers to the customer's web browser")
|
||||
Rel(api, db, "Reads from and writes to", "JDBC")
|
||||
Rel(api, db2, "Reads from and writes to", "JDBC")
|
||||
Rel_R(db, db2, "Replicates data to")
|
||||
|
||||
UpdateRelStyle(spa, api, $offsetY="-40")
|
||||
UpdateRelStyle(web, spa, $offsetY="-40")
|
||||
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
|
||||
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
|
||||
UpdateRelStyle(db, db2, $offsetY="-10")
|
||||
|
||||
```
|
||||
|
||||
<!--- cspell:ignore bigbank bigbankdb techn mbsfacade --->
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,72 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/configuration.md](../../packages/mermaid/src/docs/config/configuration.md).
|
||||
|
||||
# Configuration
|
||||
|
||||
When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:
|
||||
|
||||
- The default configuration
|
||||
- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
|
||||
- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
|
||||
- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
|
||||
|
||||
**The render config** is configuration that is used when rendering by applying these configurations.
|
||||
|
||||
## Frontmatter config
|
||||
|
||||
The entire mermaid configuration (except the secure configs) can be overridden by the diagram author in the frontmatter of the diagram. The frontmatter is a YAML block at the top of the diagram.
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: Hello Title
|
||||
config:
|
||||
theme: base
|
||||
themeVariables:
|
||||
primaryColor: "#00ff00"
|
||||
---
|
||||
flowchart
|
||||
Hello --> World
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Hello Title
|
||||
config:
|
||||
theme: base
|
||||
themeVariables:
|
||||
primaryColor: "#00ff00"
|
||||
---
|
||||
flowchart
|
||||
Hello --> World
|
||||
|
||||
```
|
||||
|
||||
## Theme configuration
|
||||
|
||||
## Starting mermaid
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
Site->>mermaid: initialize
|
||||
Site->>mermaid: content loaded
|
||||
mermaid->>mermaidAPI: init
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Site->>mermaid: initialize
|
||||
Site->>mermaid: content loaded
|
||||
mermaid->>mermaidAPI: init
|
||||
```
|
||||
|
||||
## Initialize
|
||||
|
||||
The initialize call is applied **only once**. It is called by the site integrator in order to override the default configuration at a site level.
|
||||
|
||||
## configApi.reset
|
||||
|
||||
This method resets the configuration for a diagram to the overall site configuration, which is the configuration provided by the site integrator. Before each rendering of a diagram, reset is called at the very beginning.
|
||||
@@ -0,0 +1,342 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/directives.md](../../packages/mermaid/src/docs/config/directives.md).
|
||||
|
||||
# Directives
|
||||
|
||||
> **Warning**
|
||||
> Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
|
||||
|
||||
## Directives
|
||||
|
||||
Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
|
||||
|
||||
The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
|
||||
|
||||
While directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the _option to define the set of configurations_ that you wish to allow diagram authors to override with directives.
|
||||
|
||||
## Types of Directives options
|
||||
|
||||
Mermaid basically supports two types of configuration options to be overridden by directives.
|
||||
|
||||
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
|
||||
- theme
|
||||
- fontFamily
|
||||
- logLevel
|
||||
- securityLevel
|
||||
- startOnLoad
|
||||
- secure
|
||||
|
||||
2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
|
||||
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
|
||||
|
||||
**NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
|
||||
|
||||
> **Note**
|
||||
> We plan to publish a complete list of top-level configurations & diagram-specific configurations with their possible values in the docs soon.
|
||||
|
||||
## Declaring directives
|
||||
|
||||
Now that we have defined the types of configurations that are available, we can learn how to declare directives.
|
||||
A directive always starts and ends with `%%` signs with directive text in between, like `%% {directive_text} %%`.
|
||||
|
||||
Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
|
||||
|
||||
The following code snippet shows the structure of a directive:
|
||||
|
||||
```
|
||||
%%{
|
||||
init: {
|
||||
"theme": "dark",
|
||||
"fontFamily": "monospace",
|
||||
"logLevel": "info",
|
||||
"htmlLabels": true,
|
||||
"flowchart": {
|
||||
"curve": "linear"
|
||||
},
|
||||
"sequence": {
|
||||
"mirrorActors": true
|
||||
}
|
||||
}
|
||||
}%%
|
||||
```
|
||||
|
||||
You can also define the directives in a single line, like this:
|
||||
|
||||
```
|
||||
%%{init: { **insert configuration options here** } }%%
|
||||
```
|
||||
|
||||
For example, the following code snippet:
|
||||
|
||||
```
|
||||
%%{init: { "sequence": { "mirrorActors":false }}}%%
|
||||
```
|
||||
|
||||
**Notes:**
|
||||
The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.
|
||||
Valid Key Value pairs can be found in config.
|
||||
|
||||
Example with a simple graph:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
graph LR
|
||||
A-->B
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
graph LR
|
||||
A-->B
|
||||
```
|
||||
|
||||
Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
|
||||
|
||||
Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
|
||||
...
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
|
||||
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
|
||||
...
|
||||
```
|
||||
|
||||
For example, parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
|
||||
|
||||
```json
|
||||
{
|
||||
"logLevel": "fatal",
|
||||
"theme": "dark",
|
||||
"startOnLoad": true
|
||||
}
|
||||
```
|
||||
|
||||
This will then be sent to `mermaid.initialize(...)` for rendering.
|
||||
|
||||
## Directive Examples
|
||||
|
||||
Now that the concept of directives has been explained, let us see some more examples of directive usage:
|
||||
|
||||
### Changing theme via directive
|
||||
|
||||
The following code snippet changes `theme` to `forest`:
|
||||
|
||||
`%%{init: { "theme": "forest" } }%%`
|
||||
|
||||
Possible theme values are: `default`, `base`, `dark`, `forest` and `neutral`.
|
||||
Default Value is `default`.
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "theme": "forest" } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "theme": "forest" } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
### Changing fontFamily via directive
|
||||
|
||||
The following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:
|
||||
|
||||
`%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
### Changing logLevel via directive
|
||||
|
||||
The following code snippet changes `logLevel` to `2`:
|
||||
|
||||
`%%{init: { "logLevel": 2 } }%%`
|
||||
|
||||
Possible `logLevel` values are:
|
||||
|
||||
- `1` for _debug_,
|
||||
- `2` for _info_
|
||||
- `3` for _warn_
|
||||
- `4` for _error_
|
||||
- `5` for _only fatal errors_
|
||||
|
||||
Default Value is `5`.
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "logLevel": 2 } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "logLevel": 2 } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
```
|
||||
|
||||
### Changing flowchart config via directive
|
||||
|
||||
Some common flowchart configurations are:
|
||||
|
||||
- ~~_htmlLabels_~~: Deprecated, [prefer setting this at the root level](/config/schema-docs/config#htmllabels).
|
||||
- _curve_: linear/curve
|
||||
- _diagramPadding_: number
|
||||
- _useMaxWidth_: number
|
||||
|
||||
For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
|
||||
_Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
|
||||
|
||||
The following code snippet changes flowchart config:
|
||||
|
||||
```
|
||||
%%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
|
||||
```
|
||||
|
||||
Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
|
||||
|
||||
> **Warning**
|
||||
> **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v\<MERMAID_RELEASE_VERSION>+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level.
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
|
||||
graph TD
|
||||
A(Forest) --> B[/Another/]
|
||||
A --> C[End]
|
||||
subgraph section
|
||||
B
|
||||
C
|
||||
end
|
||||
```
|
||||
|
||||
### Changing Sequence diagram config via directive
|
||||
|
||||
Some common sequence diagram configurations are:
|
||||
|
||||
- _width_: number
|
||||
- _height_: number
|
||||
- _messageAlign_: left, center, right
|
||||
- _mirrorActors_: boolean
|
||||
- _useMaxWidth_: boolean
|
||||
- _rightAngles_: boolean
|
||||
- _showSequenceNumbers_: boolean
|
||||
- _wrap_: boolean
|
||||
|
||||
For a complete list of sequence diagram configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
|
||||
_Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
|
||||
|
||||
So, `wrap` by default has a value of `false` for sequence diagrams.
|
||||
|
||||
Let us see an example:
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
|
||||
Alice->Bob: Good.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
|
||||
Alice->Bob: Good.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
|
||||
Now let us enable wrap for sequence diagrams.
|
||||
|
||||
The following code snippet changes sequence diagram config for `wrap` to `true`:
|
||||
|
||||
`%%{init: { "sequence": { "wrap": true} } }%%`
|
||||
|
||||
By applying that snippet to the diagram above, `wrap` will be enabled:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
|
||||
sequenceDiagram
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
|
||||
Alice->Bob: Good.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
|
||||
sequenceDiagram
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
|
||||
Alice->Bob: Good.
|
||||
Bob->Alice: Cool
|
||||
```
|
||||
@@ -0,0 +1,40 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).
|
||||
|
||||
# Layouts
|
||||
|
||||
This page lists the available layout algorithms supported in Mermaid diagrams.
|
||||
|
||||
## Supported Layouts
|
||||
|
||||
- **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)
|
||||
- **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)
|
||||
- **cose-bilkent**: Cose Bilkent layout for force-directed graphs
|
||||
- **dagre**: Dagre layout for layered graphs
|
||||
|
||||
## How to Use
|
||||
|
||||
You can specify the layout in your diagram's YAML config or initialization options. For example:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
graph TD;
|
||||
A-->B;
|
||||
B-->C;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
graph TD;
|
||||
A-->B;
|
||||
B-->C;
|
||||
```
|
||||
@@ -0,0 +1,96 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).
|
||||
|
||||
# Math Configuration (v10.9.0+)
|
||||
|
||||
Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
|
||||
|
||||
## Usage
|
||||
|
||||
To render math within a diagram, surround the mathematical expression with the `$$` delimiter.
|
||||
|
||||
Note that at the moment, the only supported diagrams are below:
|
||||
|
||||
### Flowcharts
|
||||
|
||||
```mermaid-example
|
||||
graph LR
|
||||
A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
|
||||
A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
|
||||
B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
|
||||
C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
|
||||
A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
|
||||
B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
|
||||
C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
|
||||
```
|
||||
|
||||
### Sequence
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
participant 1 as $$\alpha$$
|
||||
participant 2 as $$\beta$$
|
||||
1->>2: Solve: $$\sqrt{2+2}$$
|
||||
2-->>1: Answer: $$2$$
|
||||
Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
participant 1 as $$\alpha$$
|
||||
participant 2 as $$\beta$$
|
||||
1->>2: Solve: $$\sqrt{2+2}$$
|
||||
2-->>1: Answer: $$2$$
|
||||
Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
|
||||
```
|
||||
|
||||
## Legacy Support
|
||||
|
||||
By default, MathML is used for rendering mathematical expressions. If you have users on [unsupported browsers](https://caniuse.com/?search=mathml), `legacyMathML` can be set in the config to fall back to CSS rendering. Note that **you must provide KaTeX's stylesheets on your own** as they do not come bundled with Mermaid.
|
||||
|
||||
Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Please ensure the stylesheet's version matches with the KaTeX version in your package-lock -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/katex@{version_number}/dist/katex.min.css"
|
||||
integrity="sha384-{hash}"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
legacyMathML: true,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Handling Rendering Differences
|
||||
|
||||
Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config.
|
||||
|
||||
This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set.
|
||||
|
||||
If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).
|
||||
|
||||

|
||||
@@ -0,0 +1,246 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md).
|
||||
|
||||
# Theme Configuration
|
||||
|
||||
Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
|
||||
|
||||
Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, frontmatter config is used.
|
||||
|
||||
## Available Themes
|
||||
|
||||
1. [**default**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-default.js) - This is the default theme for all diagrams.
|
||||
|
||||
2. [**neutral**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-neutral.js) - This theme is great for black and white documents that will be printed.
|
||||
|
||||
3. [**dark**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-dark.js) - This theme goes well with dark-colored elements or dark-mode.
|
||||
|
||||
4. [**forest**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-forest.js) - This theme contains shades of green.
|
||||
|
||||
5. [**base**](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/themes/theme-base.js) - This is the only theme that can be modified. Use this theme as the base for customizations.
|
||||
|
||||
## Site-wide Theme
|
||||
|
||||
To customize themes site-wide, call the `initialize` method on the `mermaid`.
|
||||
|
||||
Example of `initialize` call setting `theme` to `base`:
|
||||
|
||||
```javascript
|
||||
mermaid.initialize({
|
||||
securityLevel: 'loose',
|
||||
theme: 'base',
|
||||
});
|
||||
```
|
||||
|
||||
## Diagram-specific Themes
|
||||
|
||||
To customize the theme of an individual diagram, use frontmatter config.
|
||||
|
||||
Example of frontmatter config setting the `theme` to `forest`:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
graph TD
|
||||
a --> b
|
||||
```
|
||||
|
||||
> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
|
||||
|
||||
## Customizing Themes with `themeVariables`
|
||||
|
||||
To make a custom theme, modify `themeVariables` via frontmatter config.
|
||||
|
||||
You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
|
||||
|
||||
| Parameter | Description | Type | Properties |
|
||||
| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
|
||||
| themeVariables | Modifiable with frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
|
||||
|
||||
Example of modifying `themeVariables` using frontmatter config:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
theme: 'base'
|
||||
themeVariables:
|
||||
primaryColor: '#BB2528'
|
||||
primaryTextColor: '#fff'
|
||||
primaryBorderColor: '#7C0000'
|
||||
lineColor: '#F8B229'
|
||||
secondaryColor: '#006100'
|
||||
tertiaryColor: '#fff'
|
||||
---
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
theme: 'base'
|
||||
themeVariables:
|
||||
primaryColor: '#BB2528'
|
||||
primaryTextColor: '#fff'
|
||||
primaryBorderColor: '#7C0000'
|
||||
lineColor: '#F8B229'
|
||||
secondaryColor: '#006100'
|
||||
tertiaryColor: '#fff'
|
||||
---
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
subgraph section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
```
|
||||
|
||||
## Color and Color Calculation
|
||||
|
||||
To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.
|
||||
|
||||
The theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not.
|
||||
|
||||
## Theme Variables
|
||||
|
||||
| Variable | Default value | Description |
|
||||
| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| darkMode | false | Affects how derived colors are calculated. Set value to `true` for dark mode. |
|
||||
| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background |
|
||||
| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text |
|
||||
| fontSize | 16px | Font size in pixels |
|
||||
| primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this |
|
||||
| primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor` |
|
||||
| secondaryColor | calculated from primaryColor | |
|
||||
| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using `primaryColor` |
|
||||
| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using `secondaryColor` |
|
||||
| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using `secondaryColor` |
|
||||
| tertiaryColor | calculated from primaryColor | |
|
||||
| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using `tertiaryColor` |
|
||||
| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using `tertiaryColor` |
|
||||
| noteBkgColor | #fff5ad | Color used as background in notes |
|
||||
| noteTextColor | #333 | Text color in note rectangles |
|
||||
| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles |
|
||||
| lineColor | calculated from background | |
|
||||
| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |
|
||||
| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
|
||||
| errorBkgColor | tertiaryColor | Color for syntax error message |
|
||||
| errorTextColor | tertiaryTextColor | Color for syntax error message |
|
||||
|
||||
## Flowchart Variables
|
||||
|
||||
| Variable | Default value | Description |
|
||||
| ------------------- | ------------------------------ | --------------------------- |
|
||||
| nodeBorder | primaryBorderColor | Node Border Color |
|
||||
| clusterBkg | tertiaryColor | Background in subgraphs |
|
||||
| clusterBorder | tertiaryBorderColor | Cluster Border Color |
|
||||
| defaultLinkColor | lineColor | Link Color |
|
||||
| titleColor | tertiaryTextColor | Title Color |
|
||||
| edgeLabelBackground | calculated from secondaryColor | |
|
||||
| nodeTextColor | primaryTextColor | Color for text inside Nodes |
|
||||
|
||||
## Sequence Diagram Variables
|
||||
|
||||
| Variable | Default value | Description |
|
||||
| --------------------- | ------------------------------ | --------------------------- |
|
||||
| actorBkg | mainBkg | Actor Background Color |
|
||||
| actorBorder | primaryBorderColor | Actor Border Color |
|
||||
| actorTextColor | primaryTextColor | Actor Text Color |
|
||||
| actorLineColor | actorBorder | Actor Line Color |
|
||||
| signalColor | textColor | Signal Color |
|
||||
| signalTextColor | textColor | Signal Text Color |
|
||||
| labelBoxBkgColor | actorBkg | Label Box Background Color |
|
||||
| labelBoxBorderColor | actorBorder | Label Box Border Color |
|
||||
| labelTextColor | actorTextColor | Label Text Color |
|
||||
| loopTextColor | actorTextColor | Loop Text Color |
|
||||
| activationBorderColor | calculated from secondaryColor | Activation Border Color |
|
||||
| activationBkgColor | secondaryColor | Activation Background Color |
|
||||
| sequenceNumberColor | calculated from lineColor | Sequence Number Color |
|
||||
|
||||
## Pie Diagram Variables
|
||||
|
||||
| Variable | Default value | Description |
|
||||
| ------------------- | ------------------------------ | ------------------------------------------ |
|
||||
| pie1 | primaryColor | Fill for 1st section in pie diagram |
|
||||
| pie2 | secondaryColor | Fill for 2nd section in pie diagram |
|
||||
| pie3 | calculated from tertiary | Fill for 3rd section in pie diagram |
|
||||
| pie4 | calculated from primaryColor | Fill for 4th section in pie diagram |
|
||||
| pie5 | calculated from secondaryColor | Fill for 5th section in pie diagram |
|
||||
| pie6 | calculated from tertiaryColor | Fill for 6th section in pie diagram |
|
||||
| pie7 | calculated from primaryColor | Fill for 7th section in pie diagram |
|
||||
| pie8 | calculated from primaryColor | Fill for 8th section in pie diagram |
|
||||
| pie9 | calculated from primaryColor | Fill for 9th section in pie diagram |
|
||||
| pie10 | calculated from primaryColor | Fill for 10th section in pie diagram |
|
||||
| pie11 | calculated from primaryColor | Fill for 11th section in pie diagram |
|
||||
| pie12 | calculated from primaryColor | Fill for 12th section in pie diagram |
|
||||
| pieTitleTextSize | 25px | Title text size |
|
||||
| pieTitleTextColor | taskTextDarkColor | Title text color |
|
||||
| pieSectionTextSize | 17px | Text size of individual section labels |
|
||||
| pieSectionTextColor | textColor | Text color of individual section labels |
|
||||
| pieLegendTextSize | 17px | Text size of labels in diagram legend |
|
||||
| pieLegendTextColor | taskTextDarkColor | Text color of labels in diagram legend |
|
||||
| pieStrokeColor | black | Border color of individual pie sections |
|
||||
| pieStrokeWidth | 2px | Border width of individual pie sections |
|
||||
| pieOuterStrokeWidth | 2px | Border width of pie diagram's outer circle |
|
||||
| pieOuterStrokeColor | black | Border color of pie diagram's outer circle |
|
||||
| pieOpacity | 0.7 | Opacity of individual pie sections |
|
||||
|
||||
## State Colors
|
||||
|
||||
| Variable | Default value | Description |
|
||||
| ------------- | ---------------- | -------------------------------------------- |
|
||||
| labelColor | primaryTextColor | |
|
||||
| altBackground | tertiaryColor | Used for background in deep composite states |
|
||||
|
||||
## Class Colors
|
||||
|
||||
| Variable | Default value | Description |
|
||||
| --------- | ------------- | ------------------------------- |
|
||||
| classText | textColor | Color of Text in class diagrams |
|
||||
|
||||
## User Journey Colors
|
||||
|
||||
| Variable | Default value | Description |
|
||||
| --------- | ------------------------------ | --------------------------------------- |
|
||||
| fillType0 | primaryColor | Fill for 1st section in journey diagram |
|
||||
| fillType1 | secondaryColor | Fill for 2nd section in journey diagram |
|
||||
| fillType2 | calculated from primaryColor | Fill for 3rd section in journey diagram |
|
||||
| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram |
|
||||
| fillType4 | calculated from primaryColor | Fill for 5th section in journey diagram |
|
||||
| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram |
|
||||
| fillType6 | calculated from primaryColor | Fill for 7th section in journey diagram |
|
||||
| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |
|
||||
@@ -0,0 +1,89 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/tidy-tree.md](../../packages/mermaid/src/docs/config/tidy-tree.md).
|
||||
|
||||
# Tidy-tree Layout
|
||||
|
||||
The **tidy-tree** layout arranges nodes in a hierarchical, tree-like structure. It is especially useful for diagrams where parent-child relationships are important, such as mindmaps.
|
||||
|
||||
## Features
|
||||
|
||||
- Organizes nodes in a tidy, non-overlapping tree
|
||||
- Ideal for mindmaps and hierarchical data
|
||||
- Automatically adjusts spacing for readability
|
||||
|
||||
## Example Usage
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap is a long thing))
|
||||
A
|
||||
B
|
||||
C
|
||||
D
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap is a long thing))
|
||||
A
|
||||
B
|
||||
C
|
||||
D
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectiveness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectiveness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
```
|
||||
|
||||
## Note
|
||||
|
||||
- Currently, tidy-tree is primarily supported for mindmap diagrams.
|
||||
@@ -0,0 +1,670 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md](../../packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md).
|
||||
|
||||
# Entity Relationship Diagrams
|
||||
|
||||
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types) [Wikipedia](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model).
|
||||
|
||||
Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
|
||||
|
||||
Mermaid can render ER diagrams
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: Order example
|
||||
---
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Order example
|
||||
---
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
```
|
||||
|
||||
Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
|
||||
|
||||
Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
|
||||
|
||||
ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows them to be defined in terms of their _type_ and _name_.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
|
||||
|
||||
## Syntax
|
||||
|
||||
### Entities and Relationships
|
||||
|
||||
Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to label the relationship. Each statement consists of the following parts:
|
||||
|
||||
```
|
||||
<first-entity> [<relationship> <second-entity> : <relationship-label>]
|
||||
```
|
||||
|
||||
Where:
|
||||
|
||||
- `first-entity` is the name of an entity. Names support any unicode characters and can include spaces if surrounded by double quotes (e.g. "name with space").
|
||||
- `relationship` describes the way that both entities inter-relate. See below.
|
||||
- `second-entity` is the name of the other entity.
|
||||
- `relationship-label` describes the relationship from the perspective of the first entity.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
PROPERTY ||--|{ ROOM : contains
|
||||
```
|
||||
|
||||
This statement can be read as _a property contains one or more rooms, and a room is part of one and only one property_. You can see that the label here is from the first entity's perspective: a property contains a room, but a room does not contain a property. When considered from the perspective of the second entity, the equivalent label is usually very easy to infer. (Some ER diagrams label relationships from both perspectives, but this is not supported here, and is usually superfluous).
|
||||
|
||||
Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
|
||||
|
||||
#### Unicode text
|
||||
|
||||
Entity names, relationships, and attributes all support unicode text.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
"This ❤ Unicode"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
"This ❤ Unicode"
|
||||
```
|
||||
|
||||
#### Markdown formatting
|
||||
|
||||
Markdown formatting and text is also supported.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
"This **is** _Markdown_"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
"This **is** _Markdown_"
|
||||
```
|
||||
|
||||
### Relationship Syntax
|
||||
|
||||
The `relationship` part of each statement can be broken down into three sub-components:
|
||||
|
||||
- the cardinality of the first entity with respect to the second
|
||||
- whether the relationship confers identity on a 'child' entity
|
||||
- the cardinality of the second entity with respect to the first
|
||||
|
||||
Cardinality is a property that describes how many elements of another entity can be related to the entity in question. In the above example a `PROPERTY` can have one or more `ROOM` instances associated to it, whereas a `ROOM` can only be associated with one `PROPERTY`. In each cardinality marker there are two characters. The outermost character represents a maximum value, and the innermost character represents a minimum value. The table below summarises possible cardinalities.
|
||||
|
||||
| Value (left) | Value (right) | Meaning |
|
||||
| :----------: | :-----------: | ----------------------------- |
|
||||
| `\|o` | `o\|` | Zero or one |
|
||||
| `\|\|` | `\|\|` | Exactly one |
|
||||
| `}o` | `o{` | Zero or more (no upper limit) |
|
||||
| `}\|` | `\|{` | One or more (no upper limit) |
|
||||
|
||||
**Aliases**
|
||||
|
||||
| Value (left) | Value (right) | Alias for |
|
||||
| :----------: | :-----------: | ------------ |
|
||||
| one or zero | one or zero | Zero or one |
|
||||
| zero or one | zero or one | Zero or one |
|
||||
| one or more | one or more | One or more |
|
||||
| one or many | one or many | One or more |
|
||||
| many(1) | many(1) | One or more |
|
||||
| 1+ | 1+ | One or more |
|
||||
| zero or more | zero or more | Zero or more |
|
||||
| zero or many | zero or many | Zero or more |
|
||||
| many(0) | many(0) | Zero or more |
|
||||
| 0+ | 0+ | Zero or more |
|
||||
| only one | only one | Exactly one |
|
||||
| 1 | 1 | Exactly one |
|
||||
|
||||
### Identification
|
||||
|
||||
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question cannot have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
|
||||
|
||||
| Value | Alias for |
|
||||
| :---: | :---------------: |
|
||||
| -- | _identifying_ |
|
||||
| .. | _non-identifying_ |
|
||||
|
||||
**Aliases**
|
||||
|
||||
| Value | Alias for |
|
||||
| :-----------: | :---------------: |
|
||||
| to | _identifying_ |
|
||||
| optionally to | _non-identifying_ |
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
PERSON }o..o{ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
PERSON }o..o{ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR 1 to zero or more NAMED-DRIVER : allows
|
||||
PERSON many(0) optionally to 0+ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR 1 to zero or more NAMED-DRIVER : allows
|
||||
PERSON many(0) optionally to 0+ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. The attributes are rendered inside the entity boxes. For example:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
```
|
||||
|
||||
The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
||||
|
||||
### Entity Name Aliases
|
||||
|
||||
An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. Alias names follow all of the same rules as entity names.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
p[Person] {
|
||||
string firstName
|
||||
string lastName
|
||||
}
|
||||
a["Customer Account"] {
|
||||
string email
|
||||
}
|
||||
p ||--o| a : has
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
p[Person] {
|
||||
string firstName
|
||||
string lastName
|
||||
}
|
||||
a["Customer Account"] {
|
||||
string email
|
||||
}
|
||||
p ||--o| a : has
|
||||
```
|
||||
|
||||
#### Attribute Keys and Comments
|
||||
|
||||
Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key (markdown formatting and unicode is not supported for keys). To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`). A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber PK
|
||||
string make
|
||||
string model
|
||||
string[] parts
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string driversLicense PK "The license #"
|
||||
string(99) firstName "Only 99 characters are allowed"
|
||||
string lastName
|
||||
string phone UK
|
||||
int age
|
||||
}
|
||||
NAMED-DRIVER {
|
||||
string carRegistrationNumber PK, FK
|
||||
string driverLicence PK, FK
|
||||
}
|
||||
MANUFACTURER only one to zero or more CAR : makes
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber PK
|
||||
string make
|
||||
string model
|
||||
string[] parts
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string driversLicense PK "The license #"
|
||||
string(99) firstName "Only 99 characters are allowed"
|
||||
string lastName
|
||||
string phone UK
|
||||
int age
|
||||
}
|
||||
NAMED-DRIVER {
|
||||
string carRegistrationNumber PK, FK
|
||||
string driverLicence PK, FK
|
||||
}
|
||||
MANUFACTURER only one to zero or more CAR : makes
|
||||
```
|
||||
|
||||
### Direction
|
||||
|
||||
The direction statement declares the direction of the diagram.
|
||||
|
||||
This declares that the diagram is oriented from top to bottom (`TB`). This can be reversed to be oriented from bottom to top (`BT`).
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
direction TB
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
direction TB
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
This declares that the diagram is oriented from left to right (`LR`). This can be reversed to be oriented from right to left (`RL`).
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
direction LR
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
direction LR
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
Possible diagram orientations are:
|
||||
|
||||
- TB - Top to bottom
|
||||
- BT - Bottom to top
|
||||
- RL - Right to left
|
||||
- LR - Left to right
|
||||
|
||||
### Styling a node
|
||||
|
||||
It is possible to apply specific styles such as a thicker border or a different background color to a node.
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
id1||--||id2 : label
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
id1||--||id2 : label
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
```
|
||||
|
||||
It is also possible to attach styles to a list of nodes in one statement:
|
||||
|
||||
```
|
||||
style nodeId1,nodeId2 styleList
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look.
|
||||
|
||||
A class definition looks like the example below:
|
||||
|
||||
```
|
||||
classDef className fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
It is also possible to define multiple classes in one statement:
|
||||
|
||||
```
|
||||
classDef firstClassName,secondClassName font-size:12pt
|
||||
```
|
||||
|
||||
Attachment of a class to a node is done as per below:
|
||||
|
||||
```
|
||||
class nodeId1 className
|
||||
```
|
||||
|
||||
It is also possible to attach a class to a list of nodes in one statement:
|
||||
|
||||
```
|
||||
class nodeId1,nodeId2 className
|
||||
```
|
||||
|
||||
Multiple classes can be attached at the same time as well:
|
||||
|
||||
```
|
||||
class nodeId1,nodeId2 className1,className2
|
||||
```
|
||||
|
||||
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
direction TB
|
||||
CAR:::someclass {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON:::someclass {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
HOUSE:::someclass
|
||||
|
||||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
direction TB
|
||||
CAR:::someclass {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON:::someclass {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
HOUSE:::someclass
|
||||
|
||||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
This form can be used when declaring relationships between entities:
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
PERSON:::foo ||--|| CAR : owns
|
||||
PERSON o{--|| HOUSE:::bar : has
|
||||
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
PERSON:::foo ||--|| CAR : owns
|
||||
PERSON o{--|| HOUSE:::bar : has
|
||||
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
Similar to the class statement, the shorthand syntax can also apply multiple classes at once:
|
||||
|
||||
```
|
||||
nodeId:::className1,className2
|
||||
```
|
||||
|
||||
### Default class
|
||||
|
||||
If a class is named default it will be assigned to all classes without specific class definitions.
|
||||
|
||||
```
|
||||
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
> **Note:** Custom styles from style or other class statements take priority and will overwrite the default styles. (e.g. The `default` class gives nodes a background color of pink but the `blue` class will give that node a background color of blue if applied.)
|
||||
|
||||
```mermaid-example
|
||||
erDiagram
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
PERSON:::foo ||--|| CAR : owns
|
||||
PERSON o{--|| HOUSE:::bar : has
|
||||
|
||||
classDef default fill:#f9f,stroke-width:4px
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
PERSON:::foo ||--|| CAR : owns
|
||||
PERSON o{--|| HOUSE:::bar : has
|
||||
|
||||
classDef default fill:#f9f,stroke-width:4px
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### Layout
|
||||
|
||||
The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
|
||||
|
||||
For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
|
||||
|
||||
```yaml
|
||||
---
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
```
|
||||
|
||||
Your Mermaid code should be similar to the following:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: Order example
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Order example
|
||||
config:
|
||||
layout: elk
|
||||
---
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
```
|
||||
|
||||
> **Note**
|
||||
> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
|
||||
|
||||
<!--- cspell:locale en,en-gb --->
|
||||
@@ -0,0 +1,301 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/examples.md](../../packages/mermaid/src/docs/syntax/examples.md).
|
||||
|
||||
# Examples
|
||||
|
||||
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
|
||||
|
||||
**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](../config/usage.md?id=usage).**
|
||||
|
||||
**If you wish to learn about mermaid's syntax, Read the [Diagram Syntax](../syntax/flowchart.md?id=flowcharts-basic-syntax) section.**
|
||||
|
||||
## Basic Pie Chart
|
||||
|
||||
```mermaid-example
|
||||
pie title NETFLIX
|
||||
"Time spent looking for movie" : 90
|
||||
"Time spent watching it" : 10
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title NETFLIX
|
||||
"Time spent looking for movie" : 90
|
||||
"Time spent watching it" : 10
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
pie title What Voldemort doesn't have?
|
||||
"FRIENDS" : 2
|
||||
"FAMILY" : 3
|
||||
"NOSE" : 45
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title What Voldemort doesn't have?
|
||||
"FRIENDS" : 2
|
||||
"FAMILY" : 3
|
||||
"NOSE" : 45
|
||||
```
|
||||
|
||||
## Basic sequence diagram
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
Alice ->> Bob: Hello Bob, how are you?
|
||||
Bob-->>John: How about you John?
|
||||
Bob--x Alice: I am good thanks!
|
||||
Bob-x John: I am good thanks!
|
||||
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
|
||||
|
||||
Bob-->Alice: Checking with John...
|
||||
Alice->John: Yes... John, how are you?
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice ->> Bob: Hello Bob, how are you?
|
||||
Bob-->>John: How about you John?
|
||||
Bob--x Alice: I am good thanks!
|
||||
Bob-x John: I am good thanks!
|
||||
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
|
||||
|
||||
Bob-->Alice: Checking with John...
|
||||
Alice->John: Yes... John, how are you?
|
||||
```
|
||||
|
||||
## Basic flowchart
|
||||
|
||||
```mermaid-example
|
||||
graph LR
|
||||
A[Square Rect] -- Link text --> B((Circle))
|
||||
A --> C(Round Rect)
|
||||
B --> D{Rhombus}
|
||||
C --> D
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A[Square Rect] -- Link text --> B((Circle))
|
||||
A --> C(Round Rect)
|
||||
B --> D{Rhombus}
|
||||
C --> D
|
||||
```
|
||||
|
||||
## Larger flowchart with some styling
|
||||
|
||||
```mermaid-example
|
||||
graph TB
|
||||
sq[Square shape] --> ci((Circle shape))
|
||||
|
||||
subgraph A
|
||||
od>Odd shape]-- Two line<br/>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
||||
di==>ro2(Rounded square shape)
|
||||
end
|
||||
|
||||
%% Notice that no text in shape are added here instead that is appended further down
|
||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
||||
|
||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
||||
|
||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
||||
class sq,e green
|
||||
class di orange
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
sq[Square shape] --> ci((Circle shape))
|
||||
|
||||
subgraph A
|
||||
od>Odd shape]-- Two line<br/>edge comment --> ro
|
||||
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
|
||||
di==>ro2(Rounded square shape)
|
||||
end
|
||||
|
||||
%% Notice that no text in shape are added here instead that is appended further down
|
||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
||||
|
||||
%% Comments after double percent signs
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
||||
|
||||
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
||||
|
||||
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
|
||||
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
|
||||
class sq,e green
|
||||
class di orange
|
||||
```
|
||||
|
||||
## SequenceDiagram: Loops, alt and opt
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
loop Daily query
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
alt is sick
|
||||
Bob->>Alice: Not so good :(
|
||||
else is well
|
||||
Bob->>Alice: Feeling fresh like a daisy
|
||||
end
|
||||
|
||||
opt Extra response
|
||||
Bob->>Alice: Thanks for asking
|
||||
end
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
loop Daily query
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
alt is sick
|
||||
Bob->>Alice: Not so good :(
|
||||
else is well
|
||||
Bob->>Alice: Feeling fresh like a daisy
|
||||
end
|
||||
|
||||
opt Extra response
|
||||
Bob->>Alice: Thanks for asking
|
||||
end
|
||||
end
|
||||
```
|
||||
|
||||
## SequenceDiagram: Message to self in loop
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts<br/>prevail...
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts<br/>prevail...
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
## Sequence Diagram: Blogging app service communication
|
||||
|
||||
```mermaid-example
|
||||
sequenceDiagram
|
||||
participant web as Web Browser
|
||||
participant blog as Blog Service
|
||||
participant account as Account Service
|
||||
participant mail as Mail Service
|
||||
participant db as Storage
|
||||
|
||||
Note over web,db: The user must be logged in to submit blog posts
|
||||
web->>+account: Logs in using credentials
|
||||
account->>db: Query stored accounts
|
||||
db->>account: Respond with query result
|
||||
|
||||
alt Credentials not found
|
||||
account->>web: Invalid credentials
|
||||
else Credentials found
|
||||
account->>-web: Successfully logged in
|
||||
|
||||
Note over web,db: When the user is authenticated, they can now submit new posts
|
||||
web->>+blog: Submit new post
|
||||
blog->>db: Store post data
|
||||
|
||||
par Notifications
|
||||
blog--)mail: Send mail to blog subscribers
|
||||
blog--)db: Store in-site notifications
|
||||
and Response
|
||||
blog-->>-web: Successfully posted
|
||||
end
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant web as Web Browser
|
||||
participant blog as Blog Service
|
||||
participant account as Account Service
|
||||
participant mail as Mail Service
|
||||
participant db as Storage
|
||||
|
||||
Note over web,db: The user must be logged in to submit blog posts
|
||||
web->>+account: Logs in using credentials
|
||||
account->>db: Query stored accounts
|
||||
db->>account: Respond with query result
|
||||
|
||||
alt Credentials not found
|
||||
account->>web: Invalid credentials
|
||||
else Credentials found
|
||||
account->>-web: Successfully logged in
|
||||
|
||||
Note over web,db: When the user is authenticated, they can now submit new posts
|
||||
web->>+blog: Submit new post
|
||||
blog->>db: Store post data
|
||||
|
||||
par Notifications
|
||||
blog--)mail: Send mail to blog subscribers
|
||||
blog--)db: Store in-site notifications
|
||||
and Response
|
||||
blog-->>-web: Successfully posted
|
||||
end
|
||||
end
|
||||
|
||||
```
|
||||
|
||||
## A commit flow diagram.
|
||||
|
||||
```mermaid-example
|
||||
gitGraph:
|
||||
commit "Ashish"
|
||||
branch newbranch
|
||||
checkout newbranch
|
||||
commit id:"1111"
|
||||
commit tag:"test"
|
||||
checkout main
|
||||
commit type: HIGHLIGHT
|
||||
commit
|
||||
merge newbranch
|
||||
commit
|
||||
branch b2
|
||||
commit
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gitGraph:
|
||||
commit "Ashish"
|
||||
branch newbranch
|
||||
checkout newbranch
|
||||
commit id:"1111"
|
||||
commit tag:"test"
|
||||
checkout main
|
||||
commit type: HIGHLIGHT
|
||||
commit
|
||||
merge newbranch
|
||||
commit
|
||||
branch b2
|
||||
commit
|
||||
```
|
||||
|
||||
<!--- cspell:ignore Ashish newbranch --->
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,708 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gantt.md](../../packages/mermaid/src/docs/syntax/gantt.md).
|
||||
|
||||
# Gantt diagrams
|
||||
|
||||
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
|
||||
|
||||
## A note to users
|
||||
|
||||
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
|
||||
|
||||
It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
|
||||
As shown here 
|
||||
|
||||
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
|
||||
As shown here 
|
||||
|
||||
A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
|
||||
|
||||
Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
excludes weekends
|
||||
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid :until isadded
|
||||
Functionality added :milestone, isadded, 2014-01-25, 0d
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :active, a1, after des1, 3d
|
||||
Add gantt diagram to demo page :after a1 , 20h
|
||||
Add another diagram to demo page :doc1, after a1 , 48h
|
||||
|
||||
section Last section
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
excludes weekends
|
||||
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
|
||||
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid :until isadded
|
||||
Functionality added :milestone, isadded, 2014-01-25, 0d
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :active, a1, after des1, 3d
|
||||
Add gantt diagram to demo page :after a1 , 20h
|
||||
Add another diagram to demo page :doc1, after a1 , 48h
|
||||
|
||||
section Last section
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
```
|
||||
|
||||
Tasks are by default sequential. A task start date defaults to the end date of the preceding task.
|
||||
|
||||
A colon, `:`, separates the task title from its metadata.
|
||||
Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first.
|
||||
After processing the tags, the remaining metadata items are interpreted as follows:
|
||||
|
||||
1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions.
|
||||
2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task.
|
||||
3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later <taskID>` syntax.
|
||||
|
||||
| Metadata syntax | Start date | End date | ID |
|
||||
| ---------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -------- |
|
||||
| `<taskID>, <startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, <startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <endDate>` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` |
|
||||
| `<taskID>, <startDate>, until <otherTaskId>` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, until <otherTaskId>` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | `taskID` |
|
||||
| `<startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a |
|
||||
| `after <otherTaskID>, <endDate>` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `after <otherTaskID>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a |
|
||||
| `<startDate>, until <otherTaskId>` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | n/a |
|
||||
| `after <otherTaskId>, until <otherTaskId>` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | n/a |
|
||||
| `<endDate>` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<length>` | End date of preceding task | Start date + `length` | n/a |
|
||||
| `until <otherTaskId>` | End date of preceding task | Start date of previously specified task `otherTaskID` | n/a |
|
||||
|
||||
> **Note**
|
||||
> Support for keyword `until` was added in (v10.9.0+). This can be used to define a task which is running until some other specific task or milestone starts.
|
||||
|
||||
For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted:
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
apple :a, 2017-07-20, 1w
|
||||
banana :crit, b, 2017-07-23, 1d
|
||||
cherry :active, c, after b a, 1d
|
||||
kiwi :d, 2017-07-20, until b c
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
apple :a, 2017-07-20, 1w
|
||||
banana :crit, b, 2017-07-23, 1d
|
||||
cherry :active, c, after b a, 1d
|
||||
kiwi :d, 2017-07-20, until b c
|
||||
```
|
||||
|
||||
### Title
|
||||
|
||||
The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
|
||||
|
||||
### Excludes
|
||||
|
||||
The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
|
||||
These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
|
||||
|
||||
#### Weekend (v\11.0.0+)
|
||||
|
||||
When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
|
||||
To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
title A Gantt Diagram Excluding Fri - Sat weekends
|
||||
dateFormat YYYY-MM-DD
|
||||
excludes weekends
|
||||
weekend friday
|
||||
section Section
|
||||
A task :a1, 2024-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram Excluding Fri - Sat weekends
|
||||
dateFormat YYYY-MM-DD
|
||||
excludes weekends
|
||||
weekend friday
|
||||
section Section
|
||||
A task :a1, 2024-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
```
|
||||
|
||||
### Section statements
|
||||
|
||||
You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
|
||||
|
||||
To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.
|
||||
|
||||
### Milestones
|
||||
|
||||
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49, 2m
|
||||
Task A : 10m
|
||||
Task B : 5m
|
||||
Final milestone : milestone, m2, 18:08, 4m
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49, 2m
|
||||
Task A : 10m
|
||||
Task B : 5m
|
||||
Final milestone : milestone, m2, 18:08, 4m
|
||||
```
|
||||
|
||||
### Vertical Markers
|
||||
|
||||
The `vert` keyword lets you add vertical lines to your Gantt chart, making it easy to highlight important dates like deadlines, events, or checkpoints. These markers extend across the entire chart and are positioned based on the date you provide. Unlike milestones, vertical markers don’t take up a row. They’re purely visual reference points that help break up the timeline and make important moments easier to spot.
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial vert : vert, v1, 17:30, 2m
|
||||
Task A : 3m
|
||||
Task B : 8m
|
||||
Final vert : vert, v2, 17:58, 4m
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial vert : vert, v1, 17:30, 2m
|
||||
Task A : 3m
|
||||
Task B : 8m
|
||||
Final vert : vert, v2, 17:58, 4m
|
||||
```
|
||||
|
||||
## Setting dates
|
||||
|
||||
`dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
|
||||
|
||||
### Input date format
|
||||
|
||||
The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.
|
||||
|
||||
```markdown
|
||||
dateFormat YYYY-MM-DD
|
||||
```
|
||||
|
||||
The following formatting options are supported:
|
||||
|
||||
| Input | Example | Description |
|
||||
| ---------- | -------------- | ------------------------------------------------------ |
|
||||
| `YYYY` | 2014 | 4 digit year |
|
||||
| `YY` | 14 | 2 digit year |
|
||||
| `Q` | 1..4 | Quarter of year. Sets month to first month in quarter. |
|
||||
| `M MM` | 1..12 | Month number |
|
||||
| `MMM MMMM` | January..Dec | Month name in locale set by `dayjs.locale()` |
|
||||
| `D DD` | 1..31 | Day of month |
|
||||
| `Do` | 1st..31st | Day of month with ordinal |
|
||||
| `DDD DDDD` | 1..365 | Day of year |
|
||||
| `X` | 1410715640.579 | Unix timestamp |
|
||||
| `x` | 1410715640579 | Unix ms timestamp |
|
||||
| `H HH` | 0..23 | 24 hour time |
|
||||
| `h hh` | 1..12 | 12 hour time used with `a A`. |
|
||||
| `a A` | am pm | Post or ante meridiem |
|
||||
| `m mm` | 0..59 | Minutes |
|
||||
| `s ss` | 0..59 | Seconds |
|
||||
| `S` | 0..9 | Tenths of a second |
|
||||
| `SS` | 0..99 | Hundreds of a second |
|
||||
| `SSS` | 0..999 | Thousandths of a second |
|
||||
| `Z ZZ` | +12:00 | Offset from UTC as +-HH:mm, +-HHmm, or Z |
|
||||
|
||||
More info in: <https://day.js.org/docs/en/parse/string-format/>
|
||||
|
||||
### Output date format on the axis
|
||||
|
||||
The default output date format is `YYYY-MM-DD`. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
|
||||
|
||||
```markdown
|
||||
axisFormat %Y-%m-%d
|
||||
```
|
||||
|
||||
The following formatting strings are supported:
|
||||
|
||||
| Format | Definition |
|
||||
| ------ | ------------------------------------------------------------------------------------------ |
|
||||
| %a | abbreviated weekday name |
|
||||
| %A | full weekday name |
|
||||
| %b | abbreviated month name |
|
||||
| %B | full month name |
|
||||
| %c | date and time, as "%a %b %e %H:%M:%S %Y" |
|
||||
| %d | zero-padded day of the month as a decimal number \[01,31] |
|
||||
| %e | space-padded day of the month as a decimal number \[ 1,31]; equivalent to %\_d |
|
||||
| %H | hour (24-hour clock) as a decimal number \[00,23] |
|
||||
| %I | hour (12-hour clock) as a decimal number \[01,12] |
|
||||
| %j | day of the year as a decimal number \[001,366] |
|
||||
| %m | month as a decimal number \[01,12] |
|
||||
| %M | minute as a decimal number \[00,59] |
|
||||
| %L | milliseconds as a decimal number \[000, 999] |
|
||||
| %p | either AM or PM |
|
||||
| %S | second as a decimal number \[00,61] |
|
||||
| %U | week number of the year (Sunday as the first day of the week) as a decimal number \[00,53] |
|
||||
| %w | weekday as a decimal number \[0(Sunday),6] |
|
||||
| %W | week number of the year (Monday as the first day of the week) as a decimal number \[00,53] |
|
||||
| %x | date, as "%m/%d/%Y" |
|
||||
| %X | time, as "%H:%M:%S" |
|
||||
| %y | year without century as a decimal number \[00,99] |
|
||||
| %Y | year with century as a decimal number |
|
||||
| %Z | time zone offset, such as "-0700" |
|
||||
| %% | a literal "%" character |
|
||||
|
||||
More info in: <https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format>
|
||||
|
||||
### Axis ticks (v10.3.0+)
|
||||
|
||||
The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.
|
||||
|
||||
```markdown
|
||||
tickInterval 1day
|
||||
```
|
||||
|
||||
The pattern is:
|
||||
|
||||
```javascript
|
||||
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
|
||||
```
|
||||
|
||||
More info in: <https://github.com/d3/d3-time#interval_every>
|
||||
|
||||
Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
tickInterval 1week
|
||||
weekday monday
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
tickInterval 1week
|
||||
weekday monday
|
||||
```
|
||||
|
||||
> **Warning**
|
||||
> `millisecond` and `second` support was added in v10.3.0
|
||||
|
||||
## Output in compact mode
|
||||
|
||||
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
displayMode: compact
|
||||
---
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :a2, 2014-01-20, 25d
|
||||
Another one :a3, 2014-02-10, 20d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
displayMode: compact
|
||||
---
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :a2, 2014-01-20, 25d
|
||||
Another one :a3, 2014-02-10, 20d
|
||||
```
|
||||
|
||||
## Comments
|
||||
|
||||
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
%% This is a comment
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
%% This is a comment
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 30d
|
||||
Another task :after a1, 20d
|
||||
section Another
|
||||
Task in Another :2014-01-12, 12d
|
||||
another task :24d
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
Styling of the Gantt diagram is done by defining a number of CSS classes. During rendering, these classes are extracted from the file located at src/diagrams/gantt/styles.js
|
||||
|
||||
### Classes used
|
||||
|
||||
| Class | Description |
|
||||
| --------------------- | ---------------------------------------------------------------------- |
|
||||
| grid.tick | Styling for the Grid Lines |
|
||||
| grid.path | Styling for the Grid's borders |
|
||||
| .taskText | Task Text Styling |
|
||||
| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |
|
||||
| .taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. |
|
||||
| todayMarker | Toggle and Styling for the "Today Marker" |
|
||||
|
||||
### Sample stylesheet
|
||||
|
||||
```css
|
||||
.grid .tick {
|
||||
stroke: lightgrey;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
#tag {
|
||||
color: white;
|
||||
background: #fa283d;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
padding: 3px 6px;
|
||||
margin-left: -80px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#tag:before {
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-width: 10px;
|
||||
border-bottom-color: #fa283d;
|
||||
top: -20px;
|
||||
}
|
||||
.taskText {
|
||||
fill: white;
|
||||
text-anchor: middle;
|
||||
}
|
||||
.taskTextOutsideRight {
|
||||
fill: black;
|
||||
text-anchor: start;
|
||||
}
|
||||
.taskTextOutsideLeft {
|
||||
fill: black;
|
||||
text-anchor: end;
|
||||
}
|
||||
```
|
||||
|
||||
## Today marker
|
||||
|
||||
You can style or hide the marker for the current date. To style it, add a value for the `todayMarker` key.
|
||||
|
||||
```
|
||||
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
|
||||
```
|
||||
|
||||
To hide the marker, set `todayMarker` to `off`.
|
||||
|
||||
```
|
||||
todayMarker off
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
It is possible to adjust the margins for rendering the gantt diagram.
|
||||
|
||||
This is done by defining the `ganttConfig` part of the configuration object.
|
||||
How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.
|
||||
|
||||
mermaid.ganttConfig can be set to a JSON string with config parameters or the corresponding object.
|
||||
|
||||
```javascript
|
||||
mermaid.ganttConfig = {
|
||||
titleTopMargin: 25, // Margin top for the text over the diagram
|
||||
barHeight: 20, // The height of the bars in the graph
|
||||
barGap: 4, // The margin between the different activities in the gantt diagram
|
||||
topPadding: 75, // Margin between title and gantt diagram and between axis and gantt diagram.
|
||||
rightPadding: 75, // The space allocated for the section name to the right of the activities
|
||||
leftPadding: 75, // The space allocated for the section name to the left of the activities
|
||||
gridLineStartPadding: 10, // Vertical starting position of the grid lines
|
||||
fontSize: 12, // Font size
|
||||
sectionFontSize: 24, // Font size for sections
|
||||
numberSectionStyles: 1, // The number of alternating section styles
|
||||
axisFormat: '%d/%m', // Date/time format of the axis
|
||||
tickInterval: '1week', // Axis ticks
|
||||
topAxis: true, // When this flag is set, date labels will be added to the top of the chart
|
||||
displayMode: 'compact', // Turns compact mode on
|
||||
weekday: 'sunday', // On which day a week-based interval should start
|
||||
};
|
||||
```
|
||||
|
||||
### Possible configuration params:
|
||||
|
||||
| Param | Description | Default value |
|
||||
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
|
||||
| mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false |
|
||||
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
|
||||
|
||||
## Interaction
|
||||
|
||||
It is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
|
||||
```
|
||||
click taskId call callback(arguments)
|
||||
click taskId href URL
|
||||
```
|
||||
|
||||
- taskId is the id of the task
|
||||
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
|
||||
Beginner's tip—a full example using interactive links in an HTML context:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
|
||||
section Clickable
|
||||
Visit mermaidjs :active, cl1, 2014-01-07, 3d
|
||||
Print arguments :cl2, after cl1, 3d
|
||||
Print task :cl3, after cl2, 3d
|
||||
|
||||
click cl1 href "https://mermaidjs.github.io/"
|
||||
click cl2 call printArguments("test1", "test2", test3)
|
||||
click cl3 call printTask()
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
const printArguments = function (arg1, arg2, arg3) {
|
||||
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
|
||||
};
|
||||
const printTask = function (taskId) {
|
||||
alert('taskId: ' + taskId);
|
||||
};
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Bar chart (using gantt chart)
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title Git Issues - days since last update
|
||||
dateFormat X
|
||||
axisFormat %s
|
||||
section Issue19062
|
||||
71 : 0, 71
|
||||
section Issue19401
|
||||
36 : 0, 36
|
||||
section Issue193
|
||||
34 : 0, 34
|
||||
section Issue7441
|
||||
9 : 0, 9
|
||||
section Issue1300
|
||||
5 : 0, 5
|
||||
```
|
||||
|
||||
### Timeline (with comments, CSS, config in frontmatter)
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
# Frontmatter config, YAML comments
|
||||
title: Ignored if specified in chart
|
||||
displayMode: compact #gantt specific setting but works at this level too
|
||||
config:
|
||||
# theme: forest
|
||||
# themeCSS: " #item36 { fill: CadetBlue } "
|
||||
themeCSS: " // YAML supports multiline strings using a newline markers: \n
|
||||
#item36 { fill: CadetBlue } \n
|
||||
|
||||
// Custom marker workaround CSS from forum (below) \n
|
||||
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n
|
||||
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
|
||||
"
|
||||
gantt:
|
||||
useWidth: 400
|
||||
rightPadding: 0
|
||||
topAxis: true #false
|
||||
numberSectionStyles: 2
|
||||
---
|
||||
gantt
|
||||
title Timeline - Gantt Sampler
|
||||
dateFormat YYYY
|
||||
axisFormat %y
|
||||
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
|
||||
tickInterval 1decade
|
||||
|
||||
section Issue19062
|
||||
71 : item71, 1900, 1930
|
||||
section Issue19401
|
||||
36 : item36, 1913, 1935
|
||||
section Issue1300
|
||||
94 : item94, 1910, 1915
|
||||
5 : item5, 1920, 1925
|
||||
0 : milestone, item0, 1918, 1s
|
||||
9 : vert, 1906, 1s %% not yet official
|
||||
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
# Frontmatter config, YAML comments
|
||||
title: Ignored if specified in chart
|
||||
displayMode: compact #gantt specific setting but works at this level too
|
||||
config:
|
||||
# theme: forest
|
||||
# themeCSS: " #item36 { fill: CadetBlue } "
|
||||
themeCSS: " // YAML supports multiline strings using a newline markers: \n
|
||||
#item36 { fill: CadetBlue } \n
|
||||
|
||||
// Custom marker workaround CSS from forum (below) \n
|
||||
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; } \n
|
||||
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
|
||||
"
|
||||
gantt:
|
||||
useWidth: 400
|
||||
rightPadding: 0
|
||||
topAxis: true #false
|
||||
numberSectionStyles: 2
|
||||
---
|
||||
gantt
|
||||
title Timeline - Gantt Sampler
|
||||
dateFormat YYYY
|
||||
axisFormat %y
|
||||
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
|
||||
tickInterval 1decade
|
||||
|
||||
section Issue19062
|
||||
71 : item71, 1900, 1930
|
||||
section Issue19401
|
||||
36 : item36, 1913, 1935
|
||||
section Issue1300
|
||||
94 : item94, 1910, 1915
|
||||
5 : item5, 1920, 1925
|
||||
0 : milestone, item0, 1918, 1s
|
||||
9 : vert, 1906, 1s %% not yet official
|
||||
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
|
||||
```
|
||||
|
||||
<!--- cspell:ignore isadded --->
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,161 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/kanban.md](../../packages/mermaid/src/docs/syntax/kanban.md).
|
||||
|
||||
# Mermaid Kanban Diagram Documentation
|
||||
|
||||
Mermaid’s Kanban diagram allows you to create visual representations of tasks moving through different stages of a workflow. This guide explains how to use the Kanban diagram syntax, based on the provided example.
|
||||
|
||||
## Overview
|
||||
|
||||
A Kanban diagram in Mermaid starts with the kanban keyword, followed by the definition of columns (stages) and tasks within those columns.
|
||||
|
||||
```mermaid-example
|
||||
kanban
|
||||
column1[Column Title]
|
||||
task1[Task Description]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
kanban
|
||||
column1[Column Title]
|
||||
task1[Task Description]
|
||||
```
|
||||
|
||||
## Defining Columns
|
||||
|
||||
Columns represent the different stages in your workflow, such as “Todo,” “In Progress,” “Done,” etc. Each column is defined using a unique identifier and a title enclosed in square brackets.
|
||||
|
||||
**Syntax:**
|
||||
|
||||
```
|
||||
columnId[Column Title]
|
||||
```
|
||||
|
||||
- columnId: A unique identifier for the column.
|
||||
- \[Column Title]: The title displayed on the column header.
|
||||
|
||||
Like this `id1[Todo]`
|
||||
|
||||
## Adding Tasks to Columns
|
||||
|
||||
Tasks are listed under their respective columns with an indentation. Each task also has a unique identifier and a description enclosed in square brackets.
|
||||
|
||||
**Syntax:**
|
||||
|
||||
```
|
||||
taskId[Task Description]
|
||||
```
|
||||
|
||||
```
|
||||
• taskId: A unique identifier for the task.
|
||||
• [Task Description]: The description of the task.
|
||||
```
|
||||
|
||||
**Example:**
|
||||
|
||||
```
|
||||
docs[Create Documentation]
|
||||
```
|
||||
|
||||
## Adding Metadata to Tasks
|
||||
|
||||
You can include additional metadata for each task using the @{ ... } syntax. Metadata can contain key-value pairs like assigned, ticket, priority, etc. This will be rendered added to the rendering of the node.
|
||||
|
||||
## Supported Metadata Keys
|
||||
|
||||
```
|
||||
• assigned: Specifies who is responsible for the task.
|
||||
• ticket: Links the task to a ticket or issue number.
|
||||
• priority: Indicates the urgency of the task. Allowed values: 'Very High', 'High', 'Low' and 'Very Low'
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
kanban
|
||||
todo[Todo]
|
||||
id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
|
||||
```
|
||||
|
||||
```mermaid
|
||||
kanban
|
||||
todo[Todo]
|
||||
id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
|
||||
```
|
||||
|
||||
## Configuration Options
|
||||
|
||||
You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the following example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
config:
|
||||
kanban:
|
||||
ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
|
||||
---
|
||||
```
|
||||
|
||||
When the kanban item has an assigned ticket number the ticket number in the diagram will have a link to an external system where the ticket is defined. The `ticketBaseUrl` sets the base URL to the external system and #TICKET# is replaced with the ticket value from task metadata to create a valid link.
|
||||
|
||||
## Full Example
|
||||
|
||||
Below is the full Kanban diagram based on the provided example:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
kanban:
|
||||
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
|
||||
---
|
||||
kanban
|
||||
Todo
|
||||
[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id9[Ready for deploy]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id10[Ready for test]
|
||||
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
|
||||
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
|
||||
id11[Done]
|
||||
id5[define getData]
|
||||
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
|
||||
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
|
||||
|
||||
id12[Can't reproduce]
|
||||
id3[Weird flickering in Firefox]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
kanban:
|
||||
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
|
||||
---
|
||||
kanban
|
||||
Todo
|
||||
[Create Documentation]
|
||||
docs[Create Blog about the new diagram]
|
||||
[In progress]
|
||||
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
|
||||
id9[Ready for deploy]
|
||||
id8[Design grammar]@{ assigned: 'knsv' }
|
||||
id10[Ready for test]
|
||||
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
|
||||
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
|
||||
id11[Done]
|
||||
id5[define getData]
|
||||
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
|
||||
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
|
||||
|
||||
id12[Can't reproduce]
|
||||
id3[Weird flickering in Firefox]
|
||||
```
|
||||
|
||||
In conclusion, creating a Kanban diagram in Mermaid is a straightforward process that effectively visualizes your workflow. Start by using the kanban keyword to initiate the diagram. Define your columns with unique identifiers and titles to represent different stages of your project. Under each column, list your tasks—also with unique identifiers—and provide detailed descriptions as needed. Remember that proper indentation is crucial; tasks must be indented under their parent columns to maintain the correct structure.
|
||||
|
||||
You can enhance your diagram by adding optional metadata to tasks using the @{ ... } syntax, which allows you to include additional context such as assignee, ticket numbers, and priority levels. For further customization, utilize the configuration block at the top of your file to set global options like ticketBaseUrl for linking tickets directly from your diagram.
|
||||
|
||||
By adhering to these guidelines—ensuring unique identifiers, proper indentation, and utilizing metadata and configuration options—you can create a comprehensive and customized Kanban board that effectively maps out your project’s workflow using Mermaid.
|
||||
@@ -0,0 +1,335 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/mindmap.md](../../packages/mermaid/src/docs/syntax/mindmap.md).
|
||||
|
||||
# Mindmap
|
||||
|
||||
> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
|
||||
|
||||
"A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia
|
||||
|
||||
### An example of a mindmap.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectiveness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((mindmap))
|
||||
Origins
|
||||
Long history
|
||||
::icon(fa fa-book)
|
||||
Popularisation
|
||||
British popular psychology author Tony Buzan
|
||||
Research
|
||||
On effectiveness<br/>and features
|
||||
On Automatic creation
|
||||
Uses
|
||||
Creative techniques
|
||||
Strategic planning
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid
|
||||
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.
|
||||
|
||||
In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further than the previous lines defining the nodes B and C.
|
||||
|
||||
```
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
In summary is a simple text outline where there is one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
In this way we can use a text outline to generate a hierarchical mindmap.
|
||||
|
||||
## Different shapes
|
||||
|
||||
Mermaid mindmaps can show nodes using different shapes. When specifying a shape for a node the syntax is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts, even though they are not all supported from the start.
|
||||
|
||||
Mindmap can show the following shapes:
|
||||
|
||||
### Square
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id[I am a square]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id[I am a square]
|
||||
```
|
||||
|
||||
### Rounded square
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id(I am a rounded square)
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id(I am a rounded square)
|
||||
```
|
||||
|
||||
### Circle
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id((I am a circle))
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id((I am a circle))
|
||||
```
|
||||
|
||||
### Bang
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id))I am a bang((
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id))I am a bang((
|
||||
```
|
||||
|
||||
### Cloud
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id)I am a cloud(
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id)I am a cloud(
|
||||
```
|
||||
|
||||
### Hexagon
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id{{I am a hexagon}}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id{{I am a hexagon}}
|
||||
```
|
||||
|
||||
### Default
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
I am the default shape
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
I am the default shape
|
||||
```
|
||||
|
||||
More shapes will be added, beginning with the shapes available in flowcharts.
|
||||
|
||||
# Icons and classes
|
||||
|
||||
## Icons
|
||||
|
||||
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parenthesis like in the following example where icons for material design and [Font Awesome 5](https://fontawesome.com/v5/search?o=r&m=free) are displayed. The intention is that this approach should be used for all diagrams supporting icons. **Experimental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
::icon(fa fa-book)
|
||||
B(B)
|
||||
::icon(mdi mdi-skull-outline)
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
::icon(fa fa-book)
|
||||
B(B)
|
||||
::icon(mdi mdi-skull-outline)
|
||||
```
|
||||
|
||||
## Classes
|
||||
|
||||
Again the syntax for adding classes is similar to flowcharts. You can add classes using a triple colon following a number of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text white and large increasing the font size:
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
Root
|
||||
A[A]
|
||||
:::urgent large
|
||||
B(B)
|
||||
C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
Root
|
||||
A[A]
|
||||
:::urgent large
|
||||
B(B)
|
||||
C
|
||||
```
|
||||
|
||||
_These classes need to be supplied by the site administrator._
|
||||
|
||||
## Unclear indentation
|
||||
|
||||
The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can see how the calculations are performed. Let us start with placing C with a smaller indentation than `B` but larger then `A`.
|
||||
|
||||
```
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is neither a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
Root
|
||||
A
|
||||
B
|
||||
C
|
||||
```
|
||||
|
||||
## Markdown Strings
|
||||
|
||||
The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
|
||||
|
||||
```mermaid-example
|
||||
mindmap
|
||||
id1["`**Root** with
|
||||
a second line
|
||||
Unicode works too: 🤓`"]
|
||||
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
|
||||
id3[Regular labels still works]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
id1["`**Root** with
|
||||
a second line
|
||||
Unicode works too: 🤓`"]
|
||||
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
|
||||
id3[Regular labels still works]
|
||||
```
|
||||
|
||||
Formatting:
|
||||
|
||||
- For bold text, use double asterisks \*\* before and after the text.
|
||||
- For italics, use single asterisks \* before and after the text.
|
||||
- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
|
||||
|
||||
## Integrating with your library/website.
|
||||
|
||||
Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
|
||||
|
||||
You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.esm.min.mjs';
|
||||
import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/dist/mermaid-mindmap.esm.min.mjs';
|
||||
await mermaid.registerExternalDiagrams([mindmap]);
|
||||
</script>
|
||||
```
|
||||
|
||||
From version 9.4.0 you can simplify this code to:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
|
||||
<!---
|
||||
cspell:locale en,en-gb
|
||||
cspell:ignore Buzan
|
||||
--->
|
||||
|
||||
## Layouts
|
||||
|
||||
Mermaid also supports a Tidy Tree layout for mindmaps.
|
||||
|
||||
```
|
||||
---
|
||||
config:
|
||||
layout: tidy-tree
|
||||
---
|
||||
mindmap
|
||||
root((mindmap is a long thing))
|
||||
A
|
||||
B
|
||||
C
|
||||
D
|
||||
```
|
||||
|
||||
Instructions to add and register tidy-tree layout are present in [Tidy Tree Configuration](/config/tidy-tree)
|
||||
@@ -0,0 +1,153 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
|
||||
|
||||
# Packet Diagram (v11.0.0+)
|
||||
|
||||
## Introduction
|
||||
|
||||
A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network.
|
||||
|
||||
## Usage
|
||||
|
||||
This diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
packet
|
||||
start: "Block name" %% Single-bit block
|
||||
start-end: "Block name" %% Multi-bit blocks
|
||||
... More Fields ...
|
||||
```
|
||||
|
||||
### Bits Syntax (v11.7.0+)
|
||||
|
||||
Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
|
||||
|
||||
```
|
||||
packet
|
||||
+1: "Block name" %% Single-bit block
|
||||
+8: "Block name" %% 8-bit block
|
||||
9-15: "Manually set start and end, it's fine to mix and match"
|
||||
... More Fields ...
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: "TCP Packet"
|
||||
---
|
||||
packet
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
32-63: "Sequence Number"
|
||||
64-95: "Acknowledgment Number"
|
||||
96-99: "Data Offset"
|
||||
100-105: "Reserved"
|
||||
106: "URG"
|
||||
107: "ACK"
|
||||
108: "PSH"
|
||||
109: "RST"
|
||||
110: "SYN"
|
||||
111: "FIN"
|
||||
112-127: "Window"
|
||||
128-143: "Checksum"
|
||||
144-159: "Urgent Pointer"
|
||||
160-191: "(Options and Padding)"
|
||||
192-255: "Data (variable length)"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: "TCP Packet"
|
||||
---
|
||||
packet
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
32-63: "Sequence Number"
|
||||
64-95: "Acknowledgment Number"
|
||||
96-99: "Data Offset"
|
||||
100-105: "Reserved"
|
||||
106: "URG"
|
||||
107: "ACK"
|
||||
108: "PSH"
|
||||
109: "RST"
|
||||
110: "SYN"
|
||||
111: "FIN"
|
||||
112-127: "Window"
|
||||
128-143: "Checksum"
|
||||
144-159: "Urgent Pointer"
|
||||
160-191: "(Options and Padding)"
|
||||
192-255: "Data (variable length)"
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
packet
|
||||
title UDP Packet
|
||||
+16: "Source Port"
|
||||
+16: "Destination Port"
|
||||
32-47: "Length"
|
||||
48-63: "Checksum"
|
||||
64-95: "Data (variable length)"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
packet
|
||||
title UDP Packet
|
||||
+16: "Source Port"
|
||||
+16: "Destination Port"
|
||||
32-47: "Length"
|
||||
48-63: "Checksum"
|
||||
64-95: "Data (variable length)"
|
||||
```
|
||||
|
||||
## Details of Syntax
|
||||
|
||||
- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet.
|
||||
- **Field Description**: A brief description of what the field represents, enclosed in quotes.
|
||||
|
||||
## Configuration
|
||||
|
||||
Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details.
|
||||
|
||||
<!--
|
||||
|
||||
Theme variables are not currently working due to a mermaid bug. The passed values are not being propagated into styles function.
|
||||
|
||||
## Theme Variables
|
||||
|
||||
| Property | Description | Default Value |
|
||||
| ---------------- | -------------------------- | ------------- |
|
||||
| byteFontSize | Font size of the bytes | '10px' |
|
||||
| startByteColor | Color of the starting byte | 'black' |
|
||||
| endByteColor | Color of the ending byte | 'black' |
|
||||
| labelColor | Color of the labels | 'black' |
|
||||
| labelFontSize | Font size of the labels | '12px' |
|
||||
| titleColor | Color of the title | 'black' |
|
||||
| titleFontSize | Font size of the title | '14px' |
|
||||
| blockStrokeColor | Color of the block stroke | 'black' |
|
||||
| blockStrokeWidth | Width of the block stroke | '1' |
|
||||
| blockFillColor | Fill color of the block | '#efefef' |
|
||||
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
packet:
|
||||
showBits: true
|
||||
themeVariables:
|
||||
packet:
|
||||
startByteColor: red
|
||||
---
|
||||
packet
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
32-63: "Sequence Number"
|
||||
```
|
||||
|
||||
-->
|
||||
@@ -0,0 +1,93 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/pie.md](../../packages/mermaid/src/docs/syntax/pie.md).
|
||||
|
||||
# Pie chart diagrams
|
||||
|
||||
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
|
||||
> -Wikipedia
|
||||
|
||||
Mermaid can render Pie Chart diagrams.
|
||||
|
||||
```mermaid-example
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
Drawing a pie chart is really simple in mermaid.
|
||||
|
||||
- Start with `pie` keyword to begin the diagram
|
||||
- `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
|
||||
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
|
||||
- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
|
||||
- `label` for a section in the pie diagram within `" "` quotes.
|
||||
- Followed by `:` colon as separator
|
||||
- Followed by `positive numeric value` (supported up to two decimal places)
|
||||
|
||||
**Note:**
|
||||
|
||||
> Pie chart values must be **positive numbers greater than zero**.
|
||||
> **Negative values are not allowed** and will result in an error.
|
||||
|
||||
\[pie] \[showData] (OPTIONAL)
|
||||
\[title] \[titlevalue] (OPTIONAL)
|
||||
"\[datakey1]" : \[dataValue1]
|
||||
"\[datakey2]" : \[dataValue2]
|
||||
"\[datakey3]" : \[dataValue3]
|
||||
.
|
||||
.
|
||||
|
||||
## Example
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
pie:
|
||||
textPosition: 0.5
|
||||
themeVariables:
|
||||
pieOuterStrokeWidth: "5px"
|
||||
---
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
"Potassium" : 50.05
|
||||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
pie:
|
||||
textPosition: 0.5
|
||||
themeVariables:
|
||||
pieOuterStrokeWidth: "5px"
|
||||
---
|
||||
pie showData
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
"Potassium" : 50.05
|
||||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Possible pie diagram configuration parameters:
|
||||
|
||||
| Parameter | Description | Default value |
|
||||
| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
|
||||
| `textPosition` | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.75` |
|
||||
@@ -0,0 +1,267 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/quadrantChart.md](../../packages/mermaid/src/docs/syntax/quadrantChart.md).
|
||||
|
||||
# Quadrant Chart
|
||||
|
||||
> A quadrant chart is a visual representation of data that is divided into four quadrants. It is used to plot data points on a two-dimensional grid, with one variable represented on the x-axis and another variable represented on the y-axis. The quadrants are determined by dividing the chart into four equal parts based on a set of criteria that is specific to the data being analyzed. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart. They are commonly used in business, marketing, and risk management, among other fields.
|
||||
|
||||
## Example
|
||||
|
||||
```mermaid-example
|
||||
quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.3, 0.6]
|
||||
Campaign B: [0.45, 0.23]
|
||||
Campaign C: [0.57, 0.69]
|
||||
Campaign D: [0.78, 0.34]
|
||||
Campaign E: [0.40, 0.34]
|
||||
Campaign F: [0.35, 0.78]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.3, 0.6]
|
||||
Campaign B: [0.45, 0.23]
|
||||
Campaign C: [0.57, 0.69]
|
||||
Campaign D: [0.78, 0.34]
|
||||
Campaign E: [0.40, 0.34]
|
||||
Campaign F: [0.35, 0.78]
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
> **Note**
|
||||
> If there are no points available in the chart both **axis** text and **quadrant** will be rendered in the center of the respective quadrant.
|
||||
> If there are points **x-axis** labels will rendered from the left of the respective quadrant also they will be displayed at the bottom of the chart, and **y-axis** labels will be rendered at the bottom of the respective quadrant, the quadrant text will render at the top of the respective quadrant.
|
||||
|
||||
> **Note**
|
||||
> For points x and y value min value is 0 and max value is 1.
|
||||
|
||||
### Title
|
||||
|
||||
The title is a short description of the chart and it will always render on top of the chart.
|
||||
|
||||
#### Example
|
||||
|
||||
```
|
||||
quadrantChart
|
||||
title This is a sample example
|
||||
```
|
||||
|
||||
### x-axis
|
||||
|
||||
The x-axis determines what text would be displayed in the x-axis. In x-axis there is two part **left** and **right** you can pass **both** or you can pass only **left**. The statement should start with `x-axis` then the `left axis text` followed by the delimiter `-->` then `right axis text`.
|
||||
|
||||
#### Example
|
||||
|
||||
1. `x-axis <text> --> <text>` both the left and right axis text will be rendered.
|
||||
2. `x-axis <text>` only the left axis text will be rendered.
|
||||
|
||||
### y-axis
|
||||
|
||||
The y-axis determines what text would be displayed in the y-axis. In y-axis there is two part **top** and **bottom** you can pass **both** or you can pass only **bottom**. The statement should start with `y-axis` then the `bottom axis text` followed by the delimiter `-->` then `top axis text`.
|
||||
|
||||
#### Example
|
||||
|
||||
1. `y-axis <text> --> <text>` both the bottom and top axis text will be rendered.
|
||||
2. `y-axis <text>` only the bottom axis text will be rendered.
|
||||
|
||||
### Quadrants text
|
||||
|
||||
The `quadrant-[1,2,3,4]` determine what text would be displayed inside the quadrants.
|
||||
|
||||
#### Example
|
||||
|
||||
1. `quadrant-1 <text>` determine what text will be rendered inside the top right quadrant.
|
||||
2. `quadrant-2 <text>` determine what text will be rendered inside the top left quadrant.
|
||||
3. `quadrant-3 <text>` determine what text will be rendered inside the bottom left quadrant.
|
||||
4. `quadrant-4 <text>` determine what text will be rendered inside the bottom right quadrant.
|
||||
|
||||
### Points
|
||||
|
||||
Points are used to plot a circle inside the quadrantChart. The syntax is `<text>: [x, y]` here x and y value is in the range 0 - 1.
|
||||
|
||||
#### Example
|
||||
|
||||
1. `Point 1: [0.75, 0.80]` here the Point 1 will be drawn in the top right quadrant.
|
||||
2. `Point 2: [0.35, 0.24]` here the Point 2 will be drawn in the bottom left quadrant.
|
||||
|
||||
## Chart Configurations
|
||||
|
||||
| Parameter | Description | Default value |
|
||||
| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: |
|
||||
| chartWidth | Width of the chart | 500 |
|
||||
| chartHeight | Height of the chart | 500 |
|
||||
| titlePadding | Top and Bottom padding of the title | 10 |
|
||||
| titleFontSize | Title font size | 20 |
|
||||
| quadrantPadding | Padding outside all the quadrants | 5 |
|
||||
| quadrantTextTopPadding | Quadrant text top padding when text is drawn on top ( not data points are there) | 5 |
|
||||
| quadrantLabelFontSize | Quadrant text font size | 16 |
|
||||
| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants | 1 |
|
||||
| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width | 2 |
|
||||
| xAxisLabelPadding | Top and bottom padding of x-axis text | 5 |
|
||||
| xAxisLabelFontSize | X-axis texts font size | 16 |
|
||||
| xAxisPosition | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom | 'top' |
|
||||
| yAxisLabelPadding | Left and Right padding of y-axis text | 5 |
|
||||
| yAxisLabelFontSize | Y-axis texts font size | 16 |
|
||||
| yAxisPosition | Position of y-axis (left , right) | 'left' |
|
||||
| pointTextPadding | Padding between point and the below text | 5 |
|
||||
| pointLabelFontSize | Point text font size | 12 |
|
||||
| pointRadius | Radius of the point to be drawn | 5 |
|
||||
|
||||
## Chart Theme Variables
|
||||
|
||||
| Parameter | Description |
|
||||
| -------------------------------- | --------------------------------------- |
|
||||
| quadrant1Fill | Fill color of the top right quadrant |
|
||||
| quadrant2Fill | Fill color of the top left quadrant |
|
||||
| quadrant3Fill | Fill color of the bottom left quadrant |
|
||||
| quadrant4Fill | Fill color of the bottom right quadrant |
|
||||
| quadrant1TextFill | Text color of the top right quadrant |
|
||||
| quadrant2TextFill | Text color of the top left quadrant |
|
||||
| quadrant3TextFill | Text color of the bottom left quadrant |
|
||||
| quadrant4TextFill | Text color of the bottom right quadrant |
|
||||
| quadrantPointFill | Points fill color |
|
||||
| quadrantPointTextFill | Points text color |
|
||||
| quadrantXAxisTextFill | X-axis text color |
|
||||
| quadrantYAxisTextFill | Y-axis text color |
|
||||
| quadrantInternalBorderStrokeFill | Quadrants inner border color |
|
||||
| quadrantExternalBorderStrokeFill | Quadrants outer border color |
|
||||
| quadrantTitleFill | Title color |
|
||||
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
quadrantChart:
|
||||
chartWidth: 400
|
||||
chartHeight: 400
|
||||
themeVariables:
|
||||
quadrant1TextFill: "ff0000"
|
||||
---
|
||||
quadrantChart
|
||||
x-axis Urgent --> Not Urgent
|
||||
y-axis Not Important --> "Important ❤"
|
||||
quadrant-1 Plan
|
||||
quadrant-2 Do
|
||||
quadrant-3 Delegate
|
||||
quadrant-4 Delete
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
quadrantChart:
|
||||
chartWidth: 400
|
||||
chartHeight: 400
|
||||
themeVariables:
|
||||
quadrant1TextFill: "ff0000"
|
||||
---
|
||||
quadrantChart
|
||||
x-axis Urgent --> Not Urgent
|
||||
y-axis Not Important --> "Important ❤"
|
||||
quadrant-1 Plan
|
||||
quadrant-2 Do
|
||||
quadrant-3 Delegate
|
||||
quadrant-4 Delete
|
||||
```
|
||||
|
||||
### Point styling
|
||||
|
||||
Points can either be styled directly or with defined shared classes
|
||||
|
||||
1. Direct styling
|
||||
|
||||
```md
|
||||
Point A: [0.9, 0.0] radius: 12
|
||||
Point B: [0.8, 0.1] color: #ff3300, radius: 10
|
||||
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
|
||||
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
|
||||
```
|
||||
|
||||
2. Classes styling
|
||||
|
||||
```md
|
||||
Point A:::class1: [0.9, 0.0]
|
||||
Point B:::class2: [0.8, 0.1]
|
||||
Point C:::class3: [0.7, 0.2]
|
||||
Point D:::class3: [0.7, 0.2]
|
||||
classDef class1 color: #109060
|
||||
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
|
||||
classDef class3 color: #f00fff, radius : 10
|
||||
```
|
||||
|
||||
#### Available styles:
|
||||
|
||||
| Parameter | Description |
|
||||
| ------------ | ---------------------------------------------------------------------- |
|
||||
| color | Fill color of the point |
|
||||
| radius | Radius of the point |
|
||||
| stroke-width | Border width of the point |
|
||||
| stroke-color | Border color of the point (useless when stroke-width is not specified) |
|
||||
|
||||
> **Note**
|
||||
> Order of preference:
|
||||
>
|
||||
> 1. Direct styles
|
||||
> 2. Class styles
|
||||
> 3. Theme styles
|
||||
|
||||
## Example on styling
|
||||
|
||||
```mermaid-example
|
||||
quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.9, 0.0] radius: 12
|
||||
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
|
||||
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
|
||||
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
|
||||
Campaign E:::class2: [0.5, 0.4]
|
||||
Campaign F:::class3: [0.4, 0.5] color: #0000ff
|
||||
classDef class1 color: #109060
|
||||
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
|
||||
classDef class3 color: #f00fff, radius : 10
|
||||
```
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.9, 0.0] radius: 12
|
||||
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
|
||||
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
|
||||
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
|
||||
Campaign E:::class2: [0.5, 0.4]
|
||||
Campaign F:::class3: [0.4, 0.5] color: #0000ff
|
||||
classDef class1 color: #109060
|
||||
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
|
||||
classDef class3 color: #f00fff, radius : 10
|
||||
```
|
||||
@@ -0,0 +1,269 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/radar.md](../../packages/mermaid/src/docs/syntax/radar.md).
|
||||
|
||||
# Radar Diagram (v11.6.0+)
|
||||
|
||||
## Introduction
|
||||
|
||||
A radar diagram is a simple way to plot low-dimensional data in a circular format.
|
||||
|
||||
It is also known as a **radar chart**, **spider chart**, **star chart**, **cobweb chart**, **polar chart**, or **Kiviat diagram**.
|
||||
|
||||
## Usage
|
||||
|
||||
This diagram type is particularly useful for developers, data scientists, and engineers who require a clear and concise way to represent data in a circular format.
|
||||
|
||||
It is commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions.
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
radar-beta
|
||||
axis A, B, C, D, E
|
||||
curve c1{1,2,3,4,5}
|
||||
curve c2{5,4,3,2,1}
|
||||
... More Fields ...
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: "Grades"
|
||||
---
|
||||
radar-beta
|
||||
axis m["Math"], s["Science"], e["English"]
|
||||
axis h["History"], g["Geography"], a["Art"]
|
||||
curve a["Alice"]{85, 90, 80, 70, 75, 90}
|
||||
curve b["Bob"]{70, 75, 85, 80, 90, 85}
|
||||
|
||||
max 100
|
||||
min 0
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: "Grades"
|
||||
---
|
||||
radar-beta
|
||||
axis m["Math"], s["Science"], e["English"]
|
||||
axis h["History"], g["Geography"], a["Art"]
|
||||
curve a["Alice"]{85, 90, 80, 70, 75, 90}
|
||||
curve b["Bob"]{70, 75, 85, 80, 90, 85}
|
||||
|
||||
max 100
|
||||
min 0
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
radar-beta
|
||||
title Restaurant Comparison
|
||||
axis food["Food Quality"], service["Service"], price["Price"]
|
||||
axis ambiance["Ambiance"]
|
||||
|
||||
curve a["Restaurant A"]{4, 3, 2, 4}
|
||||
curve b["Restaurant B"]{3, 4, 3, 3}
|
||||
curve c["Restaurant C"]{2, 3, 4, 2}
|
||||
curve d["Restaurant D"]{2, 2, 4, 3}
|
||||
|
||||
graticule polygon
|
||||
max 5
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
radar-beta
|
||||
title Restaurant Comparison
|
||||
axis food["Food Quality"], service["Service"], price["Price"]
|
||||
axis ambiance["Ambiance"]
|
||||
|
||||
curve a["Restaurant A"]{4, 3, 2, 4}
|
||||
curve b["Restaurant B"]{3, 4, 3, 3}
|
||||
curve c["Restaurant C"]{2, 3, 4, 2}
|
||||
curve d["Restaurant D"]{2, 2, 4, 3}
|
||||
|
||||
graticule polygon
|
||||
max 5
|
||||
|
||||
```
|
||||
|
||||
## Details of Syntax
|
||||
|
||||
### Title
|
||||
|
||||
`title`: The title is an optional field that allows to render a title at the top of the radar diagram.
|
||||
|
||||
```
|
||||
radar-beta
|
||||
title Title of the Radar Diagram
|
||||
...
|
||||
```
|
||||
|
||||
### Axis
|
||||
|
||||
`axis`: The axis keyword is used to define the axes of the radar diagram.
|
||||
|
||||
Each axis is represented by an ID and an optional label.
|
||||
|
||||
Multiple axes can be defined in a single line.
|
||||
|
||||
```
|
||||
radar-beta
|
||||
axis id1["Label1"]
|
||||
axis id2["Label2"], id3["Label3"]
|
||||
...
|
||||
```
|
||||
|
||||
### Curve
|
||||
|
||||
`curve`: The curve keyword is used to define the data points for a curve in the radar diagram.
|
||||
|
||||
Each curve is represented by an ID, an optional label, and a list of values.
|
||||
|
||||
Values can be defined by a list of numbers or a list of key-value pairs. If key-value pairs are used, the key represents the axis ID and the value represents the data point. Else, the data points are assumed to be in the order of the axes defined.
|
||||
|
||||
Multiple curves can be defined in a single line.
|
||||
|
||||
```
|
||||
radar-beta
|
||||
axis axis1, axis2, axis3
|
||||
curve id1["Label1"]{1, 2, 3}
|
||||
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
|
||||
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
|
||||
...
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
- `showLegend`: The showLegend keyword is used to show or hide the legend in the radar diagram. The legend is shown by default.
|
||||
- `max`: The maximum value for the radar diagram. This is used to scale the radar diagram. If not provided, the maximum value is calculated from the data points.
|
||||
- `min`: The minimum value for the radar diagram. This is used to scale the radar diagram. If not provided, the minimum value is `0`.
|
||||
- `graticule`: The graticule keyword is used to define the type of graticule to be rendered in the radar diagram. The graticule can be `circle` or `polygon`. If not provided, the default graticule is `circle`.
|
||||
- `ticks`: The ticks keyword is used to define the number of ticks on the graticule. It is the number of concentric circles or polygons drawn to indicate the scale of the radar diagram. If not provided, the default number of ticks is `5`.
|
||||
|
||||
```
|
||||
radar-beta
|
||||
...
|
||||
showLegend true
|
||||
max 100
|
||||
min 0
|
||||
graticule circle
|
||||
ticks 5
|
||||
...
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagram-config.html) guide for details.
|
||||
|
||||
| Parameter | Description | Default Value |
|
||||
| --------------- | ---------------------------------------- | ------------- |
|
||||
| width | Width of the radar diagram | `600` |
|
||||
| height | Height of the radar diagram | `600` |
|
||||
| marginTop | Top margin of the radar diagram | `50` |
|
||||
| marginBottom | Bottom margin of the radar diagram | `50` |
|
||||
| marginLeft | Left margin of the radar diagram | `50` |
|
||||
| marginRight | Right margin of the radar diagram | `50` |
|
||||
| axisScaleFactor | Scale factor for the axis | `1` |
|
||||
| axisLabelFactor | Factor to adjust the axis label position | `1.05` |
|
||||
| curveTension | Tension for the rounded curves | `0.17` |
|
||||
|
||||
## Theme Variables
|
||||
|
||||
### Global Theme Variables
|
||||
|
||||
> **Note**
|
||||
> The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:
|
||||
>
|
||||
> ---
|
||||
>
|
||||
> config:
|
||||
> themeVariables:
|
||||
> cScale0: "#FF0000"
|
||||
> cScale1: "#00FF00"
|
||||
>
|
||||
> ---
|
||||
|
||||
Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.
|
||||
|
||||
| Property | Description |
|
||||
| ---------- | ------------------------------ |
|
||||
| fontSize | Font size of the title |
|
||||
| titleColor | Color of the title |
|
||||
| cScale${i} | Color scale for the i-th curve |
|
||||
|
||||
### Radar Style Options
|
||||
|
||||
> **Note**
|
||||
> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.
|
||||
>
|
||||
> ---
|
||||
>
|
||||
> config:
|
||||
> themeVariables:
|
||||
> radar:
|
||||
> axisColor: "#FF0000"
|
||||
>
|
||||
> ---
|
||||
|
||||
| Property | Description | Default Value |
|
||||
| -------------------- | ---------------------------- | ------------- |
|
||||
| axisColor | Color of the axis lines | `black` |
|
||||
| axisStrokeWidth | Width of the axis lines | `1` |
|
||||
| axisLabelFontSize | Font size of the axis labels | `12px` |
|
||||
| curveOpacity | Opacity of the curves | `0.7` |
|
||||
| curveStrokeWidth | Width of the curves | `2` |
|
||||
| graticuleColor | Color of the graticule | `black` |
|
||||
| graticuleOpacity | Opacity of the graticule | `0.5` |
|
||||
| graticuleStrokeWidth | Width of the graticule | `1` |
|
||||
| legendBoxSize | Size of the legend box | `10` |
|
||||
| legendFontSize | Font size of the legend | `14px` |
|
||||
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
radar:
|
||||
axisScaleFactor: 0.25
|
||||
curveTension: 0.1
|
||||
theme: base
|
||||
themeVariables:
|
||||
cScale0: "#FF0000"
|
||||
cScale1: "#00FF00"
|
||||
cScale2: "#0000FF"
|
||||
radar:
|
||||
curveOpacity: 0
|
||||
---
|
||||
radar-beta
|
||||
axis A, B, C, D, E
|
||||
curve c1{1,2,3,4,5}
|
||||
curve c2{5,4,3,2,1}
|
||||
curve c3{3,3,3,3,3}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
radar:
|
||||
axisScaleFactor: 0.25
|
||||
curveTension: 0.1
|
||||
theme: base
|
||||
themeVariables:
|
||||
cScale0: "#FF0000"
|
||||
cScale1: "#00FF00"
|
||||
cScale2: "#0000FF"
|
||||
radar:
|
||||
curveOpacity: 0
|
||||
---
|
||||
radar-beta
|
||||
axis A, B, C, D, E
|
||||
curve c1{1,2,3,4,5}
|
||||
curve c2{5,4,3,2,1}
|
||||
curve c3{3,3,3,3,3}
|
||||
```
|
||||
|
||||
<!--- cspell:ignore Kiviat --->
|
||||
@@ -0,0 +1,495 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/requirementDiagram.md](../../packages/mermaid/src/docs/syntax/requirementDiagram.md).
|
||||
|
||||
# Requirement Diagram
|
||||
|
||||
> A Requirement diagram provides a visualization for requirements and their connections, to each other and other documented elements. The modeling specs follow those defined by SysML v1.6.
|
||||
|
||||
Rendering requirements is straightforward.
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
There are three types of components to a requirement diagram: requirement, element, and relationship.
|
||||
|
||||
The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected.
|
||||
|
||||
An important note on user text: all input can be surrounded in quotes or not. For example, both `id: "here is an example"` and `id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
|
||||
|
||||
### Requirement
|
||||
|
||||
A requirement definition contains a requirement type, name, id, text, risk, and verification method. The syntax follows:
|
||||
|
||||
```
|
||||
<type> user_defined_name {
|
||||
id: user_defined_id
|
||||
text: user_defined text
|
||||
risk: <risk>
|
||||
verifymethod: <method>
|
||||
}
|
||||
```
|
||||
|
||||
Type, risk, and method are enumerations defined in SysML.
|
||||
|
||||
| Keyword | Options |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
|
||||
| Risk | Low, Medium, High |
|
||||
| VerificationMethod | Analysis, Inspection, Test, Demonstration |
|
||||
|
||||
### Element
|
||||
|
||||
An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
|
||||
|
||||
```
|
||||
element user_defined_name {
|
||||
type: user_defined_type
|
||||
docref: user_defined_ref
|
||||
}
|
||||
```
|
||||
|
||||
### Markdown Formatting
|
||||
|
||||
In places where user defined text is possible (like names, requirement text, element docref, etc.), you can:
|
||||
|
||||
- Surround the text in quotes: `"example text"`
|
||||
- Use markdown formatting inside quotes: `"**bold text** and *italics*"`
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement "__test_req__" {
|
||||
id: 1
|
||||
text: "*italicized text* **bold text**"
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement "__test_req__" {
|
||||
id: 1
|
||||
text: "*italicized text* **bold text**"
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
```
|
||||
|
||||
### Relationship
|
||||
|
||||
Relationships are comprised of a source node, destination node, and relationship type.
|
||||
|
||||
Each follows the definition format of
|
||||
|
||||
```
|
||||
{name of source} - <type> -> {name of destination}
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```
|
||||
{name of destination} <- <type> - {name of source}
|
||||
```
|
||||
|
||||
"name of source" and "name of destination" should be names of requirement or element nodes defined elsewhere.
|
||||
|
||||
A relationship type can be one of contains, copies, derives, satisfies, verifies, refines, or traces.
|
||||
|
||||
Each relationship is labeled in the diagram.
|
||||
|
||||
## Larger Example
|
||||
|
||||
This example uses all features of the diagram.
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
functionalRequirement test_req2 {
|
||||
id: 1.1
|
||||
text: the second test text.
|
||||
risk: low
|
||||
verifymethod: inspection
|
||||
}
|
||||
|
||||
performanceRequirement test_req3 {
|
||||
id: 1.2
|
||||
text: the third test text.
|
||||
risk: medium
|
||||
verifymethod: demonstration
|
||||
}
|
||||
|
||||
interfaceRequirement test_req4 {
|
||||
id: 1.2.1
|
||||
text: the fourth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
physicalRequirement test_req5 {
|
||||
id: 1.2.2
|
||||
text: the fifth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
designConstraint test_req6 {
|
||||
id: 1.2.3
|
||||
text: the sixth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
element test_entity2 {
|
||||
type: word doc
|
||||
docRef: reqs/test_entity
|
||||
}
|
||||
|
||||
element test_entity3 {
|
||||
type: "test suite"
|
||||
docRef: github.com/all_the_tests
|
||||
}
|
||||
|
||||
|
||||
test_entity - satisfies -> test_req2
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req3 - contains -> test_req4
|
||||
test_req4 - derives -> test_req5
|
||||
test_req5 - refines -> test_req6
|
||||
test_entity3 - verifies -> test_req5
|
||||
test_req <- copies - test_entity2
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
functionalRequirement test_req2 {
|
||||
id: 1.1
|
||||
text: the second test text.
|
||||
risk: low
|
||||
verifymethod: inspection
|
||||
}
|
||||
|
||||
performanceRequirement test_req3 {
|
||||
id: 1.2
|
||||
text: the third test text.
|
||||
risk: medium
|
||||
verifymethod: demonstration
|
||||
}
|
||||
|
||||
interfaceRequirement test_req4 {
|
||||
id: 1.2.1
|
||||
text: the fourth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
physicalRequirement test_req5 {
|
||||
id: 1.2.2
|
||||
text: the fifth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
designConstraint test_req6 {
|
||||
id: 1.2.3
|
||||
text: the sixth test text.
|
||||
risk: medium
|
||||
verifymethod: analysis
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
element test_entity2 {
|
||||
type: word doc
|
||||
docRef: reqs/test_entity
|
||||
}
|
||||
|
||||
element test_entity3 {
|
||||
type: "test suite"
|
||||
docRef: github.com/all_the_tests
|
||||
}
|
||||
|
||||
|
||||
test_entity - satisfies -> test_req2
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req3 - contains -> test_req4
|
||||
test_req4 - derives -> test_req5
|
||||
test_req5 - refines -> test_req6
|
||||
test_entity3 - verifies -> test_req5
|
||||
test_req <- copies - test_entity2
|
||||
```
|
||||
|
||||
## Direction
|
||||
|
||||
The diagram can be rendered in different directions using the `direction` statement. Valid values are:
|
||||
|
||||
- `TB` - Top to Bottom (default)
|
||||
- `BT` - Bottom to Top
|
||||
- `LR` - Left to Right
|
||||
- `RL` - Right to Left
|
||||
|
||||
Example:
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
direction LR
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
direction LR
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
Requirements and elements can be styled using direct styling or classes. As a rule of thumb, when applying styles or classes, it accepts a list of requirement or element names and a list of class names allowing multiple assignments at a time (The only exception is the shorthand syntax `:::` which can assign multiple classes but only to one requirement or element at a time).
|
||||
|
||||
### Direct Styling
|
||||
|
||||
Use the `style` keyword to apply CSS styles directly:
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: styling example
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
style test_req fill:#ffa,stroke:#000, color: green
|
||||
style test_entity fill:#f9f,stroke:#333, color: blue
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: styling example
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
style test_req fill:#ffa,stroke:#000, color: green
|
||||
style test_entity fill:#f9f,stroke:#333, color: blue
|
||||
```
|
||||
|
||||
### Class Definitions
|
||||
|
||||
Define reusable styles using `classDef`:
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: "class styling example"
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
classDef important fill:#f96,stroke:#333,stroke-width:4px
|
||||
classDef test fill:#ffa,stroke:#000
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
text: "class styling example"
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
classDef important fill:#f96,stroke:#333,stroke-width:4px
|
||||
classDef test fill:#ffa,stroke:#000
|
||||
```
|
||||
|
||||
### Default class
|
||||
|
||||
If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.
|
||||
|
||||
```
|
||||
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
### Applying Classes
|
||||
|
||||
Classes can be applied in two ways:
|
||||
|
||||
1. Using the `class` keyword:
|
||||
|
||||
```
|
||||
class test_req,test_entity important
|
||||
```
|
||||
|
||||
2. Using the shorthand syntax with `:::` either during the definition or afterwards:
|
||||
|
||||
```
|
||||
requirement test_req:::important {
|
||||
id: 1
|
||||
text: class styling example
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
element test_elem {
|
||||
}
|
||||
|
||||
test_elem:::myClass
|
||||
```
|
||||
|
||||
### Combined Example
|
||||
|
||||
```mermaid-example
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::important {
|
||||
id: 1
|
||||
text: "class styling example"
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
classDef important font-weight:bold
|
||||
|
||||
class test_entity important
|
||||
style test_entity fill:#f9f,stroke:#333
|
||||
```
|
||||
|
||||
```mermaid
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req:::important {
|
||||
id: 1
|
||||
text: "class styling example"
|
||||
risk: low
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
classDef important font-weight:bold
|
||||
|
||||
class test_entity important
|
||||
style test_entity fill:#f9f,stroke:#333
|
||||
```
|
||||
|
||||
<!--- cspell:ignore reqs --->
|
||||
@@ -0,0 +1,305 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md).
|
||||
|
||||
# Sankey diagram (v10.3.0+)
|
||||
|
||||
> A sankey diagram is a visualization used to depict a flow from one set of values to another.
|
||||
|
||||
> **Warning**
|
||||
> This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
|
||||
|
||||
The things being connected are called nodes and the connections are called links.
|
||||
|
||||
## Example
|
||||
|
||||
This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors.
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
sankey:
|
||||
showValues: false
|
||||
---
|
||||
sankey
|
||||
|
||||
Agricultural 'waste',Bio-conversion,124.729
|
||||
Bio-conversion,Liquid,0.597
|
||||
Bio-conversion,Losses,26.862
|
||||
Bio-conversion,Solid,280.322
|
||||
Bio-conversion,Gas,81.144
|
||||
Biofuel imports,Liquid,35
|
||||
Biomass imports,Solid,35
|
||||
Coal imports,Coal,11.606
|
||||
Coal reserves,Coal,63.965
|
||||
Coal,Solid,75.571
|
||||
District heating,Industry,10.639
|
||||
District heating,Heating and cooling - commercial,22.505
|
||||
District heating,Heating and cooling - homes,46.184
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
Electricity grid,Industry,342.165
|
||||
Electricity grid,Road transport,37.797
|
||||
Electricity grid,Agriculture,4.412
|
||||
Electricity grid,Heating and cooling - commercial,40.858
|
||||
Electricity grid,Losses,56.691
|
||||
Electricity grid,Rail transport,7.863
|
||||
Electricity grid,Lighting & appliances - commercial,90.008
|
||||
Electricity grid,Lighting & appliances - homes,93.494
|
||||
Gas imports,Ngas,40.719
|
||||
Gas reserves,Ngas,82.233
|
||||
Gas,Heating and cooling - commercial,0.129
|
||||
Gas,Losses,1.401
|
||||
Gas,Thermal generation,151.891
|
||||
Gas,Agriculture,2.096
|
||||
Gas,Industry,48.58
|
||||
Geothermal,Electricity grid,7.013
|
||||
H2 conversion,H2,20.897
|
||||
H2 conversion,Losses,6.242
|
||||
H2,Road transport,20.897
|
||||
Hydro,Electricity grid,6.995
|
||||
Liquid,Industry,121.066
|
||||
Liquid,International shipping,128.69
|
||||
Liquid,Road transport,135.835
|
||||
Liquid,Domestic aviation,14.458
|
||||
Liquid,International aviation,206.267
|
||||
Liquid,Agriculture,3.64
|
||||
Liquid,National navigation,33.218
|
||||
Liquid,Rail transport,4.413
|
||||
Marine algae,Bio-conversion,4.375
|
||||
Ngas,Gas,122.952
|
||||
Nuclear,Thermal generation,839.978
|
||||
Oil imports,Oil,504.287
|
||||
Oil reserves,Oil,107.703
|
||||
Oil,Liquid,611.99
|
||||
Other waste,Solid,56.587
|
||||
Other waste,Bio-conversion,77.81
|
||||
Pumped heat,Heating and cooling - homes,193.026
|
||||
Pumped heat,Heating and cooling - commercial,70.672
|
||||
Solar PV,Electricity grid,59.901
|
||||
Solar Thermal,Heating and cooling - homes,19.263
|
||||
Solar,Solar Thermal,19.263
|
||||
Solar,Solar PV,59.901
|
||||
Solid,Agriculture,0.882
|
||||
Solid,Thermal generation,400.12
|
||||
Solid,Industry,46.477
|
||||
Thermal generation,Electricity grid,525.531
|
||||
Thermal generation,Losses,787.129
|
||||
Thermal generation,District heating,79.329
|
||||
Tidal,Electricity grid,9.452
|
||||
UK land based bioenergy,Bio-conversion,182.01
|
||||
Wave,Electricity grid,19.013
|
||||
Wind,Electricity grid,289.366
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
sankey:
|
||||
showValues: false
|
||||
---
|
||||
sankey
|
||||
|
||||
Agricultural 'waste',Bio-conversion,124.729
|
||||
Bio-conversion,Liquid,0.597
|
||||
Bio-conversion,Losses,26.862
|
||||
Bio-conversion,Solid,280.322
|
||||
Bio-conversion,Gas,81.144
|
||||
Biofuel imports,Liquid,35
|
||||
Biomass imports,Solid,35
|
||||
Coal imports,Coal,11.606
|
||||
Coal reserves,Coal,63.965
|
||||
Coal,Solid,75.571
|
||||
District heating,Industry,10.639
|
||||
District heating,Heating and cooling - commercial,22.505
|
||||
District heating,Heating and cooling - homes,46.184
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
Electricity grid,Industry,342.165
|
||||
Electricity grid,Road transport,37.797
|
||||
Electricity grid,Agriculture,4.412
|
||||
Electricity grid,Heating and cooling - commercial,40.858
|
||||
Electricity grid,Losses,56.691
|
||||
Electricity grid,Rail transport,7.863
|
||||
Electricity grid,Lighting & appliances - commercial,90.008
|
||||
Electricity grid,Lighting & appliances - homes,93.494
|
||||
Gas imports,Ngas,40.719
|
||||
Gas reserves,Ngas,82.233
|
||||
Gas,Heating and cooling - commercial,0.129
|
||||
Gas,Losses,1.401
|
||||
Gas,Thermal generation,151.891
|
||||
Gas,Agriculture,2.096
|
||||
Gas,Industry,48.58
|
||||
Geothermal,Electricity grid,7.013
|
||||
H2 conversion,H2,20.897
|
||||
H2 conversion,Losses,6.242
|
||||
H2,Road transport,20.897
|
||||
Hydro,Electricity grid,6.995
|
||||
Liquid,Industry,121.066
|
||||
Liquid,International shipping,128.69
|
||||
Liquid,Road transport,135.835
|
||||
Liquid,Domestic aviation,14.458
|
||||
Liquid,International aviation,206.267
|
||||
Liquid,Agriculture,3.64
|
||||
Liquid,National navigation,33.218
|
||||
Liquid,Rail transport,4.413
|
||||
Marine algae,Bio-conversion,4.375
|
||||
Ngas,Gas,122.952
|
||||
Nuclear,Thermal generation,839.978
|
||||
Oil imports,Oil,504.287
|
||||
Oil reserves,Oil,107.703
|
||||
Oil,Liquid,611.99
|
||||
Other waste,Solid,56.587
|
||||
Other waste,Bio-conversion,77.81
|
||||
Pumped heat,Heating and cooling - homes,193.026
|
||||
Pumped heat,Heating and cooling - commercial,70.672
|
||||
Solar PV,Electricity grid,59.901
|
||||
Solar Thermal,Heating and cooling - homes,19.263
|
||||
Solar,Solar Thermal,19.263
|
||||
Solar,Solar PV,59.901
|
||||
Solid,Agriculture,0.882
|
||||
Solid,Thermal generation,400.12
|
||||
Solid,Industry,46.477
|
||||
Thermal generation,Electricity grid,525.531
|
||||
Thermal generation,Losses,787.129
|
||||
Thermal generation,District heating,79.329
|
||||
Tidal,Electricity grid,9.452
|
||||
UK land based bioenergy,Bio-conversion,182.01
|
||||
Wave,Electricity grid,19.013
|
||||
Wind,Electricity grid,289.366
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
The idea behind syntax is that a user types `sankey` keyword first, then pastes raw CSV below and get the result.
|
||||
|
||||
It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
|
||||
|
||||
- CSV must contain **3 columns only**
|
||||
- It is **allowed** to have **empty lines** without comma separators for visual purposes
|
||||
|
||||
### Basic
|
||||
|
||||
It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
|
||||
|
||||
```mermaid-example
|
||||
sankey
|
||||
|
||||
%% source,target,value
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey
|
||||
|
||||
%% source,target,value
|
||||
Electricity grid,Over generation / exports,104.453
|
||||
Electricity grid,Heating and cooling - homes,113.726
|
||||
Electricity grid,H2 conversion,27.14
|
||||
```
|
||||
|
||||
### Empty Lines
|
||||
|
||||
CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
|
||||
|
||||
```mermaid-example
|
||||
sankey
|
||||
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey
|
||||
|
||||
Bio-conversion,Losses,26.862
|
||||
|
||||
Bio-conversion,Solid,280.322
|
||||
|
||||
Bio-conversion,Gas,81.144
|
||||
```
|
||||
|
||||
### Commas
|
||||
|
||||
If you need to have a comma, wrap it in double quotes:
|
||||
|
||||
```mermaid-example
|
||||
sankey
|
||||
|
||||
Pumped heat,"Heating and cooling, homes",193.026
|
||||
Pumped heat,"Heating and cooling, commercial",70.672
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey
|
||||
|
||||
Pumped heat,"Heating and cooling, homes",193.026
|
||||
Pumped heat,"Heating and cooling, commercial",70.672
|
||||
```
|
||||
|
||||
### Double Quotes
|
||||
|
||||
If you need to have double quote, put a pair of them inside quoted string:
|
||||
|
||||
```mermaid-example
|
||||
sankey
|
||||
|
||||
Pumped heat,"Heating and cooling, ""homes""",193.026
|
||||
Pumped heat,"Heating and cooling, ""commercial""",70.672
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sankey
|
||||
|
||||
Pumped heat,"Heating and cooling, ""homes""",193.026
|
||||
Pumped heat,"Heating and cooling, ""commercial""",70.672
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
You can customize link colors, node alignments and diagram dimensions.
|
||||
|
||||
```html
|
||||
<script>
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
sankey: {
|
||||
width: 800,
|
||||
height: 400,
|
||||
linkColor: 'source',
|
||||
nodeAlignment: 'left',
|
||||
},
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
|
||||
### Links Coloring
|
||||
|
||||
You can adjust links' color by setting `linkColor` to one of those:
|
||||
|
||||
- `source` - link will be of a source node color
|
||||
- `target` - link will be of a target node color
|
||||
- `gradient` - link color will be smoothly transient between source and target node colors
|
||||
- hex code of color, like `#a1a1a1`
|
||||
|
||||
### Node Alignment
|
||||
|
||||
Graph layout can be changed by setting `nodeAlignment` to:
|
||||
|
||||
- `justify`
|
||||
- `center`
|
||||
- `left`
|
||||
- `right`
|
||||
|
||||
<!--- cspell:ignore Ngas bioenergy biofuel --->
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,672 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/stateDiagram.md](../../packages/mermaid/src/docs/syntax/stateDiagram.md).
|
||||
|
||||
# State diagrams
|
||||
|
||||
> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
|
||||
> State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the
|
||||
> case, while at other times this is a reasonable abstraction." Wikipedia
|
||||
|
||||
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make
|
||||
it easier for users to share diagrams between mermaid and plantUml.
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
title: Simple sample
|
||||
---
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
title: Simple sample
|
||||
---
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
Older renderer:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via
|
||||
a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
|
||||
**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
|
||||
the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.)
|
||||
|
||||
## States
|
||||
|
||||
A state can be declared in multiple ways. The simplest way is to define a state with just an id:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
```
|
||||
|
||||
Another way is by using the state keyword with a description as per below:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
state "This is a state description" as s2
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
state "This is a state description" as s2
|
||||
```
|
||||
|
||||
Another way to define a state with a description is to define the state id followed by a colon and the description:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
s2 : This is a state description
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
s2 : This is a state description
|
||||
```
|
||||
|
||||
## Transitions
|
||||
|
||||
Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->".
|
||||
|
||||
When you define a transition between two states and the states are not already defined, the undefined states are defined
|
||||
with the id from the transition. You can later add descriptions to states defined this way.
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
s1 --> s2
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
s1 --> s2
|
||||
```
|
||||
|
||||
It is possible to add text to a transition to describe what it represents:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
s1 --> s2: A transition
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
s1 --> s2: A transition
|
||||
```
|
||||
|
||||
## Start and End
|
||||
|
||||
There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and
|
||||
the direction of the transition to it defines it either as a start or a stop state.
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
[*] --> s1
|
||||
s1 --> [*]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> s1
|
||||
s1 --> [*]
|
||||
```
|
||||
|
||||
## Composite states
|
||||
|
||||
In a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can
|
||||
have several internal states. These are called composite states in this terminology.
|
||||
|
||||
In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
|
||||
state between {}. You can name a composite state on a separate line just like a simple state. See the example below:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
state First {
|
||||
[*] --> second
|
||||
second --> [*]
|
||||
}
|
||||
|
||||
[*] --> NamedComposite
|
||||
NamedComposite: Another Composite
|
||||
state NamedComposite {
|
||||
[*] --> namedSimple
|
||||
namedSimple --> [*]
|
||||
namedSimple: Another simple
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
state First {
|
||||
[*] --> second
|
||||
second --> [*]
|
||||
}
|
||||
|
||||
[*] --> NamedComposite
|
||||
NamedComposite: Another Composite
|
||||
state NamedComposite {
|
||||
[*] --> namedSimple
|
||||
namedSimple --> [*]
|
||||
namedSimple: Another simple
|
||||
}
|
||||
```
|
||||
|
||||
You can do this in several layers:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
|
||||
state First {
|
||||
[*] --> Second
|
||||
|
||||
state Second {
|
||||
[*] --> second
|
||||
second --> Third
|
||||
|
||||
state Third {
|
||||
[*] --> third
|
||||
third --> [*]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
|
||||
state First {
|
||||
[*] --> Second
|
||||
|
||||
state Second {
|
||||
[*] --> second
|
||||
second --> Third
|
||||
|
||||
state Third {
|
||||
[*] --> third
|
||||
third --> [*]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can also define transitions also between composite states:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
First --> Second
|
||||
First --> Third
|
||||
|
||||
state First {
|
||||
[*] --> fir
|
||||
fir --> [*]
|
||||
}
|
||||
state Second {
|
||||
[*] --> sec
|
||||
sec --> [*]
|
||||
}
|
||||
state Third {
|
||||
[*] --> thi
|
||||
thi --> [*]
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> First
|
||||
First --> Second
|
||||
First --> Third
|
||||
|
||||
state First {
|
||||
[*] --> fir
|
||||
fir --> [*]
|
||||
}
|
||||
state Second {
|
||||
[*] --> sec
|
||||
sec --> [*]
|
||||
}
|
||||
state Third {
|
||||
[*] --> thi
|
||||
thi --> [*]
|
||||
}
|
||||
```
|
||||
|
||||
_You cannot define transitions between internal states belonging to different composite states_
|
||||
|
||||
## Choice
|
||||
|
||||
Sometimes you need to model a choice between two or more paths, you can do so using <\<choice>>.
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
state if_state <<choice>>
|
||||
[*] --> IsPositive
|
||||
IsPositive --> if_state
|
||||
if_state --> False: if n < 0
|
||||
if_state --> True : if n >= 0
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
state if_state <<choice>>
|
||||
[*] --> IsPositive
|
||||
IsPositive --> if_state
|
||||
if_state --> False: if n < 0
|
||||
if_state --> True : if n >= 0
|
||||
```
|
||||
|
||||
## Forks
|
||||
|
||||
It is possible to specify a fork in the diagram using <\<fork>> <\<join>>.
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
fork_state --> State2
|
||||
fork_state --> State3
|
||||
|
||||
state join_state <<join>>
|
||||
State2 --> join_state
|
||||
State3 --> join_state
|
||||
join_state --> State4
|
||||
State4 --> [*]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
state fork_state <<fork>>
|
||||
[*] --> fork_state
|
||||
fork_state --> State2
|
||||
fork_state --> State3
|
||||
|
||||
state join_state <<join>>
|
||||
State2 --> join_state
|
||||
State3 --> join_state
|
||||
join_state --> State4
|
||||
State4 --> [*]
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
Sometimes nothing says it better than a Post-it note. That is also the case in state diagrams.
|
||||
|
||||
Here you can choose to put the note to the _right of_ or to the _left of_ a node.
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
```
|
||||
|
||||
## Concurrency
|
||||
|
||||
As in plantUml you can specify concurrency using the -- symbol.
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||
--
|
||||
[*] --> CapsLockOff
|
||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||
--
|
||||
[*] --> ScrollLockOff
|
||||
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
|
||||
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||
--
|
||||
[*] --> CapsLockOff
|
||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||
--
|
||||
[*] --> ScrollLockOff
|
||||
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
|
||||
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
|
||||
}
|
||||
```
|
||||
|
||||
## Setting the direction of the diagram
|
||||
|
||||
With state diagrams you can use the direction statement to set the direction which the diagram will render like in this
|
||||
example.
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram
|
||||
direction LR
|
||||
[*] --> A
|
||||
A --> B
|
||||
B --> C
|
||||
state B {
|
||||
direction LR
|
||||
a --> b
|
||||
}
|
||||
B --> D
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
direction LR
|
||||
[*] --> A
|
||||
A --> B
|
||||
B --> C
|
||||
state B {
|
||||
direction LR
|
||||
a --> b
|
||||
}
|
||||
B --> D
|
||||
```
|
||||
|
||||
## Comments
|
||||
|
||||
Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their
|
||||
own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next
|
||||
newline will be treated as a comment, including any diagram syntax
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
%% this is a comment
|
||||
Still --> Moving
|
||||
Moving --> Still %% another comment
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Still
|
||||
Still --> [*]
|
||||
%% this is a comment
|
||||
Still --> Moving
|
||||
Moving --> Still %% another comment
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
```
|
||||
|
||||
## Styling with classDefs
|
||||
|
||||
As with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a
|
||||
state or states in the diagram.
|
||||
|
||||
**These are the current limitations with state diagram classDefs:**
|
||||
|
||||
1. Cannot be applied to start or end states
|
||||
2. Cannot be applied to or within composite states
|
||||
|
||||
_These are in development and will be available in a future version._
|
||||
|
||||
You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something
|
||||
like a _CSS class_)
|
||||
followed by _a name for the style,_
|
||||
and then one or more _property-value pairs_. Each _property-value pair_ is
|
||||
a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._
|
||||
|
||||
Here is an example of a classDef with just one property-value pair:
|
||||
|
||||
```txt
|
||||
classDef movement font-style:italic;
|
||||
```
|
||||
|
||||
where
|
||||
|
||||
- the _name_ of the style is `movement`
|
||||
- the only _property_ is `font-style` and its _value_ is `italic`
|
||||
|
||||
If you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._
|
||||
|
||||
Here is an example with three property-value pairs:
|
||||
|
||||
```txt
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
||||
```
|
||||
|
||||
where
|
||||
|
||||
- the _name_ of the style is `badBadEvent`
|
||||
- the first _property_ is `fill` and its _value_ is `#f00`
|
||||
- the second _property_ is `color` and its _value_ is `white`
|
||||
- the third _property_ is `font-weight` and its _value_ is `bold`
|
||||
- the fourth _property_ is `stroke-width` and its _value_ is `2px`
|
||||
- the fifth _property_ is `stroke` and its _value_ is `yellow`
|
||||
|
||||
### Apply classDef styles to states
|
||||
|
||||
There are two ways to apply a `classDef` style to a state:
|
||||
|
||||
1. use the `class` keyword to apply a classDef style to one or more states in a single statement, or
|
||||
2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
|
||||
to/from another state)
|
||||
|
||||
#### 1. `class` statement
|
||||
|
||||
A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
|
||||
|
||||
```txt
|
||||
class [one or more state names, separated by commas] [name of a style defined with classDef]
|
||||
```
|
||||
|
||||
Here is an example applying the `badBadEvent` style to a state named `Crash`:
|
||||
|
||||
```txt
|
||||
class Crash badBadEvent
|
||||
```
|
||||
|
||||
Here is an example applying the `movement` style to the two states `Moving` and `Crash`:
|
||||
|
||||
```txt
|
||||
class Moving, Crash movement
|
||||
```
|
||||
|
||||
Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`
|
||||
and `badBadEvent`
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram
|
||||
direction TB
|
||||
|
||||
accTitle: This is the accessible title
|
||||
accDescr: This is an accessible description
|
||||
|
||||
classDef notMoving fill:white
|
||||
classDef movement font-style:italic
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
||||
|
||||
[*]--> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
|
||||
class Still notMoving
|
||||
class Moving, Crash movement
|
||||
class Crash badBadEvent
|
||||
class end badBadEvent
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
direction TB
|
||||
|
||||
accTitle: This is the accessible title
|
||||
accDescr: This is an accessible description
|
||||
|
||||
classDef notMoving fill:white
|
||||
classDef movement font-style:italic
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
||||
|
||||
[*]--> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
Moving --> Crash
|
||||
Crash --> [*]
|
||||
|
||||
class Still notMoving
|
||||
class Moving, Crash movement
|
||||
class Crash badBadEvent
|
||||
class end badBadEvent
|
||||
```
|
||||
|
||||
#### 2. `:::` operator to apply a style to a state
|
||||
|
||||
You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is
|
||||
|
||||
```txt
|
||||
[state]:::[style name]
|
||||
```
|
||||
|
||||
You can use this in a diagram within a statement using a class. This includes the start and end states. For example:
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram
|
||||
direction TB
|
||||
|
||||
accTitle: This is the accessible title
|
||||
accDescr: This is an accessible description
|
||||
|
||||
classDef notMoving fill:white
|
||||
classDef movement font-style:italic;
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
||||
|
||||
[*] --> Still:::notMoving
|
||||
Still --> [*]
|
||||
Still --> Moving:::movement
|
||||
Moving --> Still
|
||||
Moving --> Crash:::movement
|
||||
Crash:::badBadEvent --> [*]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
direction TB
|
||||
|
||||
accTitle: This is the accessible title
|
||||
accDescr: This is an accessible description
|
||||
|
||||
classDef notMoving fill:white
|
||||
classDef movement font-style:italic;
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
||||
|
||||
[*] --> Still:::notMoving
|
||||
Still --> [*]
|
||||
Still --> Moving:::movement
|
||||
Moving --> Still
|
||||
Moving --> Crash:::movement
|
||||
Crash:::badBadEvent --> [*]
|
||||
```
|
||||
|
||||
## Spaces in state names
|
||||
|
||||
Spaces can be added to a state by first defining the state with an id and then referencing the id later.
|
||||
|
||||
In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
|
||||
After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
|
||||
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
|
||||
(**yswsii** has been styled so that it is different from the other states.)
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram
|
||||
classDef yourState font-style:italic,font-weight:bold,fill:white
|
||||
|
||||
yswsii: Your state with spaces in it
|
||||
[*] --> yswsii:::yourState
|
||||
[*] --> SomeOtherState
|
||||
SomeOtherState --> YetAnotherState
|
||||
yswsii --> YetAnotherState
|
||||
YetAnotherState --> [*]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
classDef yourState font-style:italic,font-weight:bold,fill:white
|
||||
|
||||
yswsii: Your state with spaces in it
|
||||
[*] --> yswsii:::yourState
|
||||
[*] --> SomeOtherState
|
||||
SomeOtherState --> YetAnotherState
|
||||
yswsii --> YetAnotherState
|
||||
YetAnotherState --> [*]
|
||||
```
|
||||
|
||||
<!--- cspell:ignore yswsii --->
|
||||
@@ -0,0 +1,540 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/timeline.md](../../packages/mermaid/src/docs/syntax/timeline.md).
|
||||
|
||||
# Timeline Diagram
|
||||
|
||||
> Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
|
||||
|
||||
"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" [(Wikipedia)](https://en.wikipedia.org/wiki/Timeline).
|
||||
|
||||
### An example of a timeline
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook
|
||||
: Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook
|
||||
: Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
The syntax for creating Timeline diagram is simple. You always start with the `timeline` keyword to let mermaid know that you want to create a timeline diagram.
|
||||
|
||||
After that there is a possibility to add a title to the timeline. This is done by adding a line with the keyword `title` followed by the title text.
|
||||
|
||||
Then you add the timeline data, where you always start with a time period, followed by a colon and then the text for the event. Optionally you can add a second colon and then the text for the event. So, you can have one or more events per time period.
|
||||
|
||||
```json
|
||||
{time period} : {event}
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```json
|
||||
{time period} : {event} : {event}
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```json
|
||||
{time period} : {event}
|
||||
: {event}
|
||||
: {event}
|
||||
```
|
||||
|
||||
**NOTE**: Both time period and event are simple text, and not limited to numbers.
|
||||
|
||||
Let us look at the syntax for the example above.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
```
|
||||
|
||||
In this way we can use a text outline to generate a timeline diagram.
|
||||
The sequence of time period and events is important, as it will be used to draw the timeline. The first time period will be placed at the left side of the timeline, and the last time period will be placed at the right side of the timeline.
|
||||
|
||||
Similarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.
|
||||
|
||||
## Grouping of time periods in sections/ages
|
||||
|
||||
You can group time periods in sections/ages. This is done by adding a line with the keyword `section` followed by the section name.
|
||||
|
||||
All subsequent time periods will be placed in this section until a new section is defined.
|
||||
|
||||
If no section is defined, all time periods will be placed in the default section.
|
||||
|
||||
Let us look at an example, where we have grouped the time periods in sections.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title Timeline of Industrial Revolution
|
||||
section 17th-20th century
|
||||
Industry 1.0 : Machinery, Water power, Steam <br>power
|
||||
Industry 2.0 : Electricity, Internal combustion engine, Mass production
|
||||
Industry 3.0 : Electronics, Computers, Automation
|
||||
section 21st century
|
||||
Industry 4.0 : Internet, Robotics, Internet of Things
|
||||
Industry 5.0 : Artificial intelligence, Big data, 3D printing
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Timeline of Industrial Revolution
|
||||
section 17th-20th century
|
||||
Industry 1.0 : Machinery, Water power, Steam <br>power
|
||||
Industry 2.0 : Electricity, Internal combustion engine, Mass production
|
||||
Industry 3.0 : Electronics, Computers, Automation
|
||||
section 21st century
|
||||
Industry 4.0 : Internet, Robotics, Internet of Things
|
||||
Industry 5.0 : Artificial intelligence, Big data, 3D printing
|
||||
```
|
||||
|
||||
As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.
|
||||
|
||||
All time periods and events under a given section follow a similar color scheme. This is done to make it easier to see the relationship between time periods and events.
|
||||
|
||||
## Wrapping of text for long time-periods or events
|
||||
|
||||
By default, the text for time-periods and events will be wrapped if it is too long. This is done to avoid that the text is drawn outside the diagram.
|
||||
|
||||
You can also use `<br>` to force a line break.
|
||||
|
||||
Let us look at another example, where we have a long time period, and a long event.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title England's History Timeline
|
||||
section Stone Age
|
||||
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
|
||||
section Bronze Age
|
||||
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
|
||||
: New styles of pottery and ways of burying the dead appear.
|
||||
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
|
||||
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title England's History Timeline
|
||||
section Stone Age
|
||||
7600 BC : Britain's oldest known house was built in Orkney, Scotland
|
||||
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
|
||||
section Bronze Age
|
||||
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
|
||||
: New styles of pottery and ways of burying the dead appear.
|
||||
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
|
||||
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
|
||||
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title MermaidChart 2023 Timeline
|
||||
section 2023 Q1 <br> Release Personal Tier
|
||||
Bullet 1 : sub-point 1a : sub-point 1b
|
||||
: sub-point 1c
|
||||
Bullet 2 : sub-point 2a : sub-point 2b
|
||||
section 2023 Q2 <br> Release XYZ Tier
|
||||
Bullet 3 : sub-point <br> 3a : sub-point 3b
|
||||
: sub-point 3c
|
||||
Bullet 4 : sub-point 4a : sub-point 4b
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title MermaidChart 2023 Timeline
|
||||
section 2023 Q1 <br> Release Personal Tier
|
||||
Bullet 1 : sub-point 1a : sub-point 1b
|
||||
: sub-point 1c
|
||||
Bullet 2 : sub-point 2a : sub-point 2b
|
||||
section 2023 Q2 <br> Release XYZ Tier
|
||||
Bullet 3 : sub-point <br> 3a : sub-point 3b
|
||||
: sub-point 3c
|
||||
Bullet 4 : sub-point 4a : sub-point 4b
|
||||
```
|
||||
|
||||
## Styling of time periods and events
|
||||
|
||||
As explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme.
|
||||
|
||||
However, if there is no section defined, then we have two possibilities:
|
||||
|
||||
1. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
|
||||
```
|
||||
|
||||
**NOTE**: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
|
||||
|
||||
2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
|
||||
|
||||
You will need to add this option either via mermaid.initialize function or directives.
|
||||
|
||||
```javascript
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
startOnLoad: true,
|
||||
logLevel: 0,
|
||||
timeline: {
|
||||
disableMulticolor: false,
|
||||
},
|
||||
...
|
||||
...
|
||||
```
|
||||
|
||||
let us look at same example, where we have disabled the multiColor option.
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
timeline:
|
||||
disableMulticolor: true
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
timeline:
|
||||
disableMulticolor: true
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
|
||||
```
|
||||
|
||||
### Customizing Color scheme
|
||||
|
||||
You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
|
||||
In case you have more than 12 sections, the color scheme will start to repeat.
|
||||
|
||||
If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
|
||||
|
||||
**NOTE**: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
|
||||
|
||||
Example:
|
||||
|
||||
Now let's override the default values for the `cScale0` to `cScale2` variables:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
cScale0: '#ff0000'
|
||||
cScaleLabel0: '#ffffff'
|
||||
cScale1: '#00ff00'
|
||||
cScale2: '#0000ff'
|
||||
cScaleLabel2: '#ffffff'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
themeVariables:
|
||||
cScale0: '#ff0000'
|
||||
cScaleLabel0: '#ffffff'
|
||||
cScale1: '#00ff00'
|
||||
cScale2: '#0000ff'
|
||||
cScaleLabel2: '#ffffff'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
|
||||
```
|
||||
|
||||
See how the colors are changed to the values specified in the theme variables.
|
||||
|
||||
## Themes
|
||||
|
||||
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).
|
||||
|
||||
The following are the different pre-defined theme options:
|
||||
|
||||
- `base`
|
||||
- `forest`
|
||||
- `dark`
|
||||
- `default`
|
||||
- `neutral`
|
||||
|
||||
**NOTE**: To change theme you can either use the `initialize` call or _directives_. Learn more about [directives](../config/directives.md)
|
||||
Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
|
||||
### Base Theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'base'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
### Forest Theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'forest'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
### Dark Theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'dark'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
### Default Theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'default'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
### Neutral Theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
logLevel: 'debug'
|
||||
theme: 'neutral'
|
||||
---
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
2002 : LinkedIn
|
||||
2004 : Facebook : Google
|
||||
2005 : YouTube
|
||||
2006 : Twitter
|
||||
2007 : Tumblr
|
||||
2008 : Instagram
|
||||
2010 : Pinterest
|
||||
```
|
||||
|
||||
## Integrating with your library/website
|
||||
|
||||
Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
|
||||
|
||||
You can use this method to add mermaid including the timeline diagram to a web page:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
</script>
|
||||
```
|
||||
|
||||
You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
@@ -0,0 +1,353 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treemap.md](../../packages/mermaid/src/docs/syntax/treemap.md).
|
||||
|
||||
# Treemap Diagram
|
||||
|
||||
> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.
|
||||
|
||||
> **Warning**
|
||||
> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.
|
||||
|
||||
## Introduction
|
||||
|
||||
Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.
|
||||
|
||||
Treemap diagrams are particularly useful for:
|
||||
|
||||
- Visualizing hierarchical data structures
|
||||
- Comparing proportions between categories
|
||||
- Displaying large amounts of hierarchical data in a limited space
|
||||
- Identifying patterns and outliers in hierarchical data
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
treemap-beta
|
||||
"Section 1"
|
||||
"Leaf 1.1": 12
|
||||
"Section 1.2"
|
||||
"Leaf 1.2.1": 12
|
||||
"Section 2"
|
||||
"Leaf 2.1": 20
|
||||
"Leaf 2.2": 25
|
||||
```
|
||||
|
||||
### Node Definition
|
||||
|
||||
Nodes in a treemap are defined using the following syntax:
|
||||
|
||||
- **Section/Parent nodes**: Defined with quoted text `"Section Name"`
|
||||
- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`
|
||||
- **Hierarchy**: Created using indentation (spaces or tabs)
|
||||
- **Styling**: Nodes can be styled using the `:::class` syntax
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Treemap
|
||||
|
||||
```mermaid-example
|
||||
treemap-beta
|
||||
"Category A"
|
||||
"Item A1": 10
|
||||
"Item A2": 20
|
||||
"Category B"
|
||||
"Item B1": 15
|
||||
"Item B2": 25
|
||||
```
|
||||
|
||||
```mermaid
|
||||
treemap-beta
|
||||
"Category A"
|
||||
"Item A1": 10
|
||||
"Item A2": 20
|
||||
"Category B"
|
||||
"Item B1": 15
|
||||
"Item B2": 25
|
||||
```
|
||||
|
||||
### Hierarchical Treemap
|
||||
|
||||
```mermaid-example
|
||||
treemap-beta
|
||||
"Products"
|
||||
"Electronics"
|
||||
"Phones": 50
|
||||
"Computers": 30
|
||||
"Accessories": 20
|
||||
"Clothing"
|
||||
"Men's": 40
|
||||
"Women's": 40
|
||||
```
|
||||
|
||||
```mermaid
|
||||
treemap-beta
|
||||
"Products"
|
||||
"Electronics"
|
||||
"Phones": 50
|
||||
"Computers": 30
|
||||
"Accessories": 20
|
||||
"Clothing"
|
||||
"Men's": 40
|
||||
"Women's": 40
|
||||
```
|
||||
|
||||
### Treemap with Styling
|
||||
|
||||
```mermaid-example
|
||||
treemap-beta
|
||||
"Section 1"
|
||||
"Leaf 1.1": 12
|
||||
"Section 1.2":::class1
|
||||
"Leaf 1.2.1": 12
|
||||
"Section 2"
|
||||
"Leaf 2.1": 20:::class1
|
||||
"Leaf 2.2": 25
|
||||
"Leaf 2.3": 12
|
||||
|
||||
classDef class1 fill:red,color:blue,stroke:#FFD600;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
treemap-beta
|
||||
"Section 1"
|
||||
"Leaf 1.1": 12
|
||||
"Section 1.2":::class1
|
||||
"Leaf 1.2.1": 12
|
||||
"Section 2"
|
||||
"Leaf 2.1": 20:::class1
|
||||
"Leaf 2.2": 25
|
||||
"Leaf 2.3": 12
|
||||
|
||||
classDef class1 fill:red,color:blue,stroke:#FFD600;
|
||||
```
|
||||
|
||||
## Styling and Configuration
|
||||
|
||||
Treemap diagrams can be customized using Mermaid's styling and configuration options.
|
||||
|
||||
### Using classDef for Styling
|
||||
|
||||
You can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:
|
||||
|
||||
```mermaid-example
|
||||
treemap-beta
|
||||
"Main"
|
||||
"A": 20
|
||||
"B":::important
|
||||
"B1": 10
|
||||
"B2": 15
|
||||
"C": 5
|
||||
|
||||
classDef important fill:#f96,stroke:#333,stroke-width:2px;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
treemap-beta
|
||||
"Main"
|
||||
"A": 20
|
||||
"B":::important
|
||||
"B1": 10
|
||||
"B2": 15
|
||||
"C": 5
|
||||
|
||||
classDef important fill:#f96,stroke:#333,stroke-width:2px;
|
||||
```
|
||||
|
||||
### Theme Configuration
|
||||
|
||||
You can customize the colors of your treemap using the theme configuration:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
treemap-beta
|
||||
"Category A"
|
||||
"Item A1": 10
|
||||
"Item A2": 20
|
||||
"Category B"
|
||||
"Item B1": 15
|
||||
"Item B2": 25
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
theme: 'forest'
|
||||
---
|
||||
treemap-beta
|
||||
"Category A"
|
||||
"Item A1": 10
|
||||
"Item A2": 20
|
||||
"Category B"
|
||||
"Item B1": 15
|
||||
"Item B2": 25
|
||||
```
|
||||
|
||||
### Diagram Padding
|
||||
|
||||
You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
treemap:
|
||||
diagramPadding: 200
|
||||
---
|
||||
treemap-beta
|
||||
"Category A"
|
||||
"Item A1": 10
|
||||
"Item A2": 20
|
||||
"Category B"
|
||||
"Item B1": 15
|
||||
"Item B2": 25
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
treemap:
|
||||
diagramPadding: 200
|
||||
---
|
||||
treemap-beta
|
||||
"Category A"
|
||||
"Item A1": 10
|
||||
"Item A2": 20
|
||||
"Category B"
|
||||
"Item B1": 15
|
||||
"Item B2": 25
|
||||
```
|
||||
|
||||
## Configuration Options
|
||||
|
||||
The treemap diagram supports the following configuration options:
|
||||
|
||||
| Option | Description | Default |
|
||||
| -------------- | --------------------------------------------------------------------------- | ------- |
|
||||
| useMaxWidth | When true, the diagram width is set to 100% and scales with available space | true |
|
||||
| padding | Internal padding between nodes | 10 |
|
||||
| diagramPadding | Padding around the entire diagram | 8 |
|
||||
| showValues | Whether to show values in the treemap | true |
|
||||
| nodeWidth | Width of nodes | 100 |
|
||||
| nodeHeight | Height of nodes | 40 |
|
||||
| borderWidth | Width of borders | 1 |
|
||||
| valueFontSize | Font size for values | 12 |
|
||||
| labelFontSize | Font size for labels | 14 |
|
||||
| valueFormat | Format for values (see Value Formatting section) | ',' |
|
||||
|
||||
## Advanced Features
|
||||
|
||||
### Value Formatting
|
||||
|
||||
Values in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3's format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.
|
||||
|
||||
Some common format patterns:
|
||||
|
||||
- `,` - Thousands separator (default)
|
||||
- `$` - Add dollar sign
|
||||
- `.1f` - Show one decimal place
|
||||
- `.1%` - Show as percentage with one decimal place
|
||||
- `$0,0` - Dollar sign with thousands separator
|
||||
- `$.2f` - Dollar sign with 2 decimal places
|
||||
- `$,.2f` - Dollar sign with thousands separator and 2 decimal places
|
||||
|
||||
The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.
|
||||
|
||||
Example with currency formatting:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
treemap:
|
||||
valueFormat: '$0,0'
|
||||
---
|
||||
treemap-beta
|
||||
"Budget"
|
||||
"Operations"
|
||||
"Salaries": 700000
|
||||
"Equipment": 200000
|
||||
"Supplies": 100000
|
||||
"Marketing"
|
||||
"Advertising": 400000
|
||||
"Events": 100000
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
treemap:
|
||||
valueFormat: '$0,0'
|
||||
---
|
||||
treemap-beta
|
||||
"Budget"
|
||||
"Operations"
|
||||
"Salaries": 700000
|
||||
"Equipment": 200000
|
||||
"Supplies": 100000
|
||||
"Marketing"
|
||||
"Advertising": 400000
|
||||
"Events": 100000
|
||||
```
|
||||
|
||||
Example with percentage formatting:
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
treemap:
|
||||
valueFormat: '$.1%'
|
||||
---
|
||||
treemap-beta
|
||||
"Market Share"
|
||||
"Company A": 0.35
|
||||
"Company B": 0.25
|
||||
"Company C": 0.15
|
||||
"Others": 0.25
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
treemap:
|
||||
valueFormat: '$.1%'
|
||||
---
|
||||
treemap-beta
|
||||
"Market Share"
|
||||
"Company A": 0.35
|
||||
"Company B": 0.25
|
||||
"Company C": 0.15
|
||||
"Others": 0.25
|
||||
```
|
||||
|
||||
## Common Use Cases
|
||||
|
||||
Treemap diagrams are commonly used for:
|
||||
|
||||
1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions
|
||||
2. **File System Analysis**: Showing disk space usage by folders and files
|
||||
3. **Population Demographics**: Displaying population distribution across regions and subregions
|
||||
4. **Product Hierarchies**: Visualizing product categories and their sales volumes
|
||||
5. **Organizational Structures**: Representing departments and team sizes in a company
|
||||
|
||||
## Limitations
|
||||
|
||||
- Treemap diagrams work best when the data has a natural hierarchy
|
||||
- Very small values may be difficult to see or label in a treemap diagram
|
||||
- Deep hierarchies (many levels) can be challenging to represent clearly
|
||||
- Treemap diagrams are not well suited for representing data with negative values
|
||||
|
||||
## Related Diagrams
|
||||
|
||||
If treemap diagrams don't suit your needs, consider these alternatives:
|
||||
|
||||
- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy
|
||||
- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).
|
||||
- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data
|
||||
|
||||
## Notes
|
||||
|
||||
The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.
|
||||
@@ -0,0 +1,42 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/userJourney.md](../../packages/mermaid/src/docs/syntax/userJourney.md).
|
||||
|
||||
# User Journey Diagram
|
||||
|
||||
> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
|
||||
|
||||
Mermaid can render user journey diagrams:
|
||||
|
||||
```mermaid-example
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
```
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
```
|
||||
|
||||
Each user journey is split into sections, these describe the part of the task
|
||||
the user is trying to complete.
|
||||
|
||||
Tasks syntax is `Task name: <score>: <comma separated list of actors>`
|
||||
|
||||
Score is a number between 1 and 5, inclusive.
|
||||
@@ -0,0 +1,250 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md).
|
||||
|
||||
# XY Chart
|
||||
|
||||
> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
|
||||
|
||||
> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
|
||||
|
||||
## Example
|
||||
|
||||
```mermaid-example
|
||||
xychart
|
||||
title "Sales Revenue"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
xychart
|
||||
title "Sales Revenue"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
> **Note**
|
||||
> All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"`
|
||||
|
||||
### Orientations
|
||||
|
||||
The chart can be drawn horizontal or vertical, default value is vertical.
|
||||
|
||||
```
|
||||
xychart horizontal
|
||||
...
|
||||
```
|
||||
|
||||
### Title
|
||||
|
||||
The title is a short description of the chart and it will always render on top of the chart.
|
||||
|
||||
#### Example
|
||||
|
||||
```
|
||||
xychart
|
||||
title "This is a simple example"
|
||||
...
|
||||
```
|
||||
|
||||
> **Note**
|
||||
> If the title is a single word one no need to use `"`, but if it has space `"` is needed
|
||||
|
||||
### x-axis
|
||||
|
||||
The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.
|
||||
|
||||
#### Example
|
||||
|
||||
1. `x-axis title min --> max` x-axis will function as numeric with the given range
|
||||
2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
|
||||
|
||||
### y-axis
|
||||
|
||||
The y-axis is employed to represent numerical range values, it cannot have categorical values.
|
||||
|
||||
#### Example
|
||||
|
||||
1. `y-axis title min --> max`
|
||||
2. `y-axis title` it will only add the title, the range will be auto generated from data.
|
||||
|
||||
> **Note**
|
||||
> Both x and y axis are optional if not provided we will try to create the range
|
||||
|
||||
### Line chart
|
||||
|
||||
A line chart offers the capability to graphically depict lines.
|
||||
|
||||
#### Example
|
||||
|
||||
1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
|
||||
|
||||
### Bar chart
|
||||
|
||||
A bar chart offers the capability to graphically depict bars.
|
||||
|
||||
#### Example
|
||||
|
||||
1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
|
||||
|
||||
#### Simplest example
|
||||
|
||||
The only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like
|
||||
|
||||
```
|
||||
xychart
|
||||
line [+1.3, .6, 2.4, -.34]
|
||||
```
|
||||
|
||||
## Chart Configurations
|
||||
|
||||
| Parameter | Description | Default value |
|
||||
| ------------------------ | ------------------------------------------------------------- | :-----------: |
|
||||
| width | Width of the chart | 700 |
|
||||
| height | Height of the chart | 500 |
|
||||
| titlePadding | Top and Bottom padding of the title | 10 |
|
||||
| titleFontSize | Title font size | 20 |
|
||||
| showTitle | Title to be shown or not | true |
|
||||
| xAxis | xAxis configuration | AxisConfig |
|
||||
| yAxis | yAxis configuration | AxisConfig |
|
||||
| chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
|
||||
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
|
||||
| showDataLabel | Should show the value corresponding to the bar within the bar | false |
|
||||
|
||||
### AxisConfig
|
||||
|
||||
| Parameter | Description | Default value |
|
||||
| ------------- | ------------------------------------ | :-----------: |
|
||||
| showLabel | Show axis labels or tick values | true |
|
||||
| labelFontSize | Font size of the label to be drawn | 14 |
|
||||
| labelPadding | Top and Bottom padding of the label | 5 |
|
||||
| showTitle | Axis title to be shown or not | true |
|
||||
| titleFontSize | Axis title font size | 16 |
|
||||
| titlePadding | Top and Bottom padding of Axis title | 5 |
|
||||
| showTick | Tick to be shown or not | true |
|
||||
| tickLength | How long the tick will be | 5 |
|
||||
| tickWidth | How width the tick will be | 2 |
|
||||
| showAxisLine | Axis line to be shown or not | true |
|
||||
| axisLineWidth | Thickness of the axis line | 2 |
|
||||
|
||||
## Chart Theme Variables
|
||||
|
||||
Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax:
|
||||
|
||||
```yaml
|
||||
---
|
||||
config:
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: '#ff0000'
|
||||
---
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
| ---------------- | --------------------------------------------------------- |
|
||||
| backgroundColor | Background color of the whole chart |
|
||||
| titleColor | Color of the Title text |
|
||||
| xAxisLabelColor | Color of the x-axis labels |
|
||||
| xAxisTitleColor | Color of the x-axis title |
|
||||
| xAxisTickColor | Color of the x-axis tick |
|
||||
| xAxisLineColor | Color of the x-axis line |
|
||||
| yAxisLabelColor | Color of the y-axis labels |
|
||||
| yAxisTitleColor | Color of the y-axis title |
|
||||
| yAxisTickColor | Color of the y-axis tick |
|
||||
| yAxisLineColor | Color of the y-axis line |
|
||||
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
|
||||
|
||||
### Setting Colors for Lines and Bars
|
||||
|
||||
To set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette).
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
themeVariables:
|
||||
xyChart:
|
||||
plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
|
||||
---
|
||||
xychart
|
||||
title "Different Colors in xyChart"
|
||||
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
|
||||
y-axis "valuesY" 0 --> 50
|
||||
%% Black line
|
||||
line [10,20,30,40]
|
||||
%% Blue bar
|
||||
bar [20,30,25,35]
|
||||
%% Green bar
|
||||
bar [15,25,20,30]
|
||||
%% Red line
|
||||
line [5,15,25,35]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
themeVariables:
|
||||
xyChart:
|
||||
plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000'
|
||||
---
|
||||
xychart
|
||||
title "Different Colors in xyChart"
|
||||
x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"]
|
||||
y-axis "valuesY" 0 --> 50
|
||||
%% Black line
|
||||
line [10,20,30,40]
|
||||
%% Blue bar
|
||||
bar [20,30,25,35]
|
||||
%% Green bar
|
||||
bar [15,25,20,30]
|
||||
%% Red line
|
||||
line [5,15,25,35]
|
||||
```
|
||||
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
width: 900
|
||||
height: 600
|
||||
showDataLabel: true
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: "#ff0000"
|
||||
---
|
||||
xychart
|
||||
title "Sales Revenue"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
---
|
||||
config:
|
||||
xyChart:
|
||||
width: 900
|
||||
height: 600
|
||||
showDataLabel: true
|
||||
themeVariables:
|
||||
xyChart:
|
||||
titleColor: "#ff0000"
|
||||
---
|
||||
xychart
|
||||
title "Sales Revenue"
|
||||
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
```
|
||||
@@ -0,0 +1,474 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/zenuml.md](../../packages/mermaid/src/docs/syntax/zenuml.md).
|
||||
|
||||
# ZenUML
|
||||
|
||||
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
|
||||
|
||||
Mermaid can render sequence diagrams with [ZenUML](https://zenuml.com). Note that ZenUML uses a different
|
||||
syntax than the original Sequence Diagram in mermaid.
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
title Demo
|
||||
Alice->John: Hello John, how are you?
|
||||
John->Alice: Great!
|
||||
Alice->John: See you later!
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
title Demo
|
||||
Alice->John: Hello John, how are you?
|
||||
John->Alice: Great!
|
||||
Alice->John: See you later!
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
### Participants
|
||||
|
||||
The participants can be defined implicitly as in the first example on this page. The participants or actors are
|
||||
rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
|
||||
different order than how they appear in the first message. It is possible to specify the actor's order of
|
||||
appearance by doing the following:
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
title Declare participant (optional)
|
||||
Bob
|
||||
Alice
|
||||
Alice->Bob: Hi Bob
|
||||
Bob->Alice: Hi Alice
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
title Declare participant (optional)
|
||||
Bob
|
||||
Alice
|
||||
Alice->Bob: Hi Bob
|
||||
Bob->Alice: Hi Alice
|
||||
```
|
||||
|
||||
### Annotators
|
||||
|
||||
If you specifically want to use symbols instead of just rectangles with text you can do so by using the annotator syntax to declare participants as per below.
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
title Annotators
|
||||
@Actor Alice
|
||||
@Database Bob
|
||||
Alice->Bob: Hi Bob
|
||||
Bob->Alice: Hi Alice
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
title Annotators
|
||||
@Actor Alice
|
||||
@Database Bob
|
||||
Alice->Bob: Hi Bob
|
||||
Bob->Alice: Hi Alice
|
||||
```
|
||||
|
||||
Here are the available annotators:
|
||||

|
||||
|
||||
### Aliases
|
||||
|
||||
The participants can have a convenient identifier and a descriptive label.
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
title Aliases
|
||||
A as Alice
|
||||
J as John
|
||||
A->J: Hello John, how are you?
|
||||
J->A: Great!
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
title Aliases
|
||||
A as Alice
|
||||
J as John
|
||||
A->J: Hello John, how are you?
|
||||
J->A: Great!
|
||||
```
|
||||
|
||||
## Messages
|
||||
|
||||
Messages can be one of:
|
||||
|
||||
1. Sync message
|
||||
2. Async message
|
||||
3. Creation message
|
||||
4. Reply message
|
||||
|
||||
### Sync message
|
||||
|
||||
You can think of a sync (blocking) method in a programming language.
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
title Sync message
|
||||
A.SyncMessage
|
||||
A.SyncMessage(with, parameters) {
|
||||
B.nestedSyncMessage()
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
title Sync message
|
||||
A.SyncMessage
|
||||
A.SyncMessage(with, parameters) {
|
||||
B.nestedSyncMessage()
|
||||
}
|
||||
```
|
||||
|
||||
### Async message
|
||||
|
||||
You can think of an async (non-blocking) method in a programming language.
|
||||
Fire an event and forget about it.
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
title Async message
|
||||
Alice->Bob: How are you?
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
title Async message
|
||||
Alice->Bob: How are you?
|
||||
```
|
||||
|
||||
### Creation message
|
||||
|
||||
We use `new` keyword to create an object.
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
new A1
|
||||
new A2(with, parameters)
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
new A1
|
||||
new A2(with, parameters)
|
||||
```
|
||||
|
||||
### Reply message
|
||||
|
||||
There are three ways to express a reply message:
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
// 1. assign a variable from a sync message.
|
||||
a = A.SyncMessage()
|
||||
|
||||
// 1.1. optionally give the variable a type
|
||||
SomeType a = A.SyncMessage()
|
||||
|
||||
// 2. use return keyword
|
||||
A.SyncMessage() {
|
||||
return result
|
||||
}
|
||||
|
||||
// 3. use @return or @reply annotator on an async message
|
||||
@return
|
||||
A->B: result
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
// 1. assign a variable from a sync message.
|
||||
a = A.SyncMessage()
|
||||
|
||||
// 1.1. optionally give the variable a type
|
||||
SomeType a = A.SyncMessage()
|
||||
|
||||
// 2. use return keyword
|
||||
A.SyncMessage() {
|
||||
return result
|
||||
}
|
||||
|
||||
// 3. use @return or @reply annotator on an async message
|
||||
@return
|
||||
A->B: result
|
||||
```
|
||||
|
||||
The third way `@return` is rarely used, but it is useful when you want to return to one level up.
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
title Reply message
|
||||
Client->A.method() {
|
||||
B.method() {
|
||||
if(condition) {
|
||||
return x1
|
||||
// return early
|
||||
@return
|
||||
A->Client: x11
|
||||
}
|
||||
}
|
||||
return x2
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
title Reply message
|
||||
Client->A.method() {
|
||||
B.method() {
|
||||
if(condition) {
|
||||
return x1
|
||||
// return early
|
||||
@return
|
||||
A->Client: x11
|
||||
}
|
||||
}
|
||||
return x2
|
||||
}
|
||||
```
|
||||
|
||||
## Nesting
|
||||
|
||||
Sync messages and Creation messages are naturally nestable with `{}`.
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
A.method() {
|
||||
B.nested_sync_method()
|
||||
B->C: nested async message
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
A.method() {
|
||||
B.nested_sync_method()
|
||||
B->C: nested async message
|
||||
}
|
||||
```
|
||||
|
||||
## Comments
|
||||
|
||||
It is possible to add comments to a sequence diagram with `// comment` syntax.
|
||||
Comments will be rendered above the messages or fragments. Comments on other places
|
||||
are ignored. Markdown is supported.
|
||||
|
||||
See the example below:
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
// a comment on a participant will not be rendered
|
||||
BookService
|
||||
// a comment on a message.
|
||||
// **Markdown** is supported.
|
||||
BookService.getBook()
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
// a comment on a participant will not be rendered
|
||||
BookService
|
||||
// a comment on a message.
|
||||
// **Markdown** is supported.
|
||||
BookService.getBook()
|
||||
```
|
||||
|
||||
## Loops
|
||||
|
||||
It is possible to express loops in a ZenUML diagram. This is done by any of the
|
||||
following notations:
|
||||
|
||||
1. while
|
||||
2. for
|
||||
3. forEach, foreach
|
||||
4. loop
|
||||
|
||||
```zenuml
|
||||
while(condition) {
|
||||
...statements...
|
||||
}
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
Alice->John: Hello John, how are you?
|
||||
while(true) {
|
||||
John->Alice: Great!
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
Alice->John: Hello John, how are you?
|
||||
while(true) {
|
||||
John->Alice: Great!
|
||||
}
|
||||
```
|
||||
|
||||
## Alt
|
||||
|
||||
It is possible to express alternative paths in a sequence diagram. This is done by the notation
|
||||
|
||||
```zenuml
|
||||
if(condition1) {
|
||||
...statements...
|
||||
} else if(condition2) {
|
||||
...statements...
|
||||
} else {
|
||||
...statements...
|
||||
}
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
if(is_sick) {
|
||||
Bob->Alice: Not so good :(
|
||||
} else {
|
||||
Bob->Alice: Feeling fresh like a daisy
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
if(is_sick) {
|
||||
Bob->Alice: Not so good :(
|
||||
} else {
|
||||
Bob->Alice: Feeling fresh like a daisy
|
||||
}
|
||||
```
|
||||
|
||||
## Opt
|
||||
|
||||
It is possible to render an `opt` fragment. This is done by the notation
|
||||
|
||||
```zenuml
|
||||
opt {
|
||||
...statements...
|
||||
}
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Not so good :(
|
||||
opt {
|
||||
Bob->Alice: Thanks for asking
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Bob->Alice: Not so good :(
|
||||
opt {
|
||||
Bob->Alice: Thanks for asking
|
||||
}
|
||||
```
|
||||
|
||||
## Parallel
|
||||
|
||||
It is possible to show actions that are happening in parallel.
|
||||
|
||||
This is done by the notation
|
||||
|
||||
```zenuml
|
||||
par {
|
||||
statement1
|
||||
statement2
|
||||
statement3
|
||||
}
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
par {
|
||||
Alice->Bob: Hello guys!
|
||||
Alice->John: Hello guys!
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
par {
|
||||
Alice->Bob: Hello guys!
|
||||
Alice->John: Hello guys!
|
||||
}
|
||||
```
|
||||
|
||||
## Try/Catch/Finally (Break)
|
||||
|
||||
It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).
|
||||
|
||||
This is done by the notation
|
||||
|
||||
```
|
||||
try {
|
||||
...statements...
|
||||
} catch {
|
||||
...statements...
|
||||
} finally {
|
||||
...statements...
|
||||
}
|
||||
```
|
||||
|
||||
See the example below:
|
||||
|
||||
```mermaid-example
|
||||
zenuml
|
||||
try {
|
||||
Consumer->API: Book something
|
||||
API->BookingService: Start booking process
|
||||
} catch {
|
||||
API->Consumer: show failure
|
||||
} finally {
|
||||
API->BookingService: rollback status
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
zenuml
|
||||
try {
|
||||
Consumer->API: Book something
|
||||
API->BookingService: Start booking process
|
||||
} catch {
|
||||
API->Consumer: show failure
|
||||
} finally {
|
||||
API->BookingService: rollback status
|
||||
}
|
||||
```
|
||||
|
||||
## Integrating with your library/website.
|
||||
|
||||
Zenuml uses the experimental lazy loading & async rendering features which could change in the future.
|
||||
|
||||
You can use this method to add mermaid including the zenuml diagram to a web page:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
|
||||
import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.1.0/dist/mermaid-zenuml.esm.min.mjs';
|
||||
await mermaid.registerExternalDiagrams([zenuml]);
|
||||
</script>
|
||||
```
|
||||
@@ -2,3 +2,4 @@ node_modules/
|
||||
.git/
|
||||
bin/
|
||||
CLAUDE.md
|
||||
.claude/skills/mermaid/
|
||||
|
||||
@@ -56,3 +56,29 @@ If you discover a security vulnerability within Laravel, please send an e-mail t
|
||||
## License
|
||||
|
||||
The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
|
||||
## Демо-данные (dev)
|
||||
|
||||
Демо-tenant создаётся `DemoSeeder` автоматически при `composer setup` /
|
||||
`php artisan migrate --seed` в окружениях `local` и `testing`
|
||||
(см. `DatabaseSeeder` — в `production` DemoSeeder не запускается).
|
||||
|
||||
**Учётные данные демо-входа:**
|
||||
|
||||
- URL: `/login`
|
||||
- Email: `admin@demo.local`
|
||||
- Пароль: `password`
|
||||
|
||||
Что создаётся: demo-tenant (`subdomain=demo`, баланс 1000 ₽ / 100 лидов),
|
||||
admin-пользователь, 3 проекта (сайт/звонок/СМС) и ~14 демо-сделок.
|
||||
|
||||
**Пере-сидировать демо-данные** (идемпотентно — повторный запуск не создаёт дублей):
|
||||
|
||||
```bash
|
||||
composer demo:seed
|
||||
```
|
||||
|
||||
Эквивалент: `php artisan db:seed --class=DemoSeeder --force`.
|
||||
|
||||
Если при логине демо-аккаунта возвращается 422 — демо-данные не засеяны
|
||||
на текущей dev-БД (например, после `migrate:fresh`); запустите `composer demo:seed`.
|
||||
|
||||
@@ -4,9 +4,9 @@ declare(strict_types=1);
|
||||
|
||||
namespace App\Console\Commands;
|
||||
|
||||
use App\Services\MonthlyPartitionManager;
|
||||
use Illuminate\Console\Command;
|
||||
use Illuminate\Support\Carbon;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
/**
|
||||
* Создаёт ежемесячные партиции для `deals` и `supplier_lead_costs`
|
||||
@@ -30,14 +30,7 @@ class PartitionsCreateMonths extends Command
|
||||
/** @var string */
|
||||
protected $description = 'Создаёт ежемесячные партиции deals и supplier_lead_costs на N месяцев вперёд (idempotent)';
|
||||
|
||||
/**
|
||||
* Список таблиц, которые партиционируются по received_at помесячно.
|
||||
*
|
||||
* @var array<int, string>
|
||||
*/
|
||||
private const PARTITIONED_TABLES = ['deals', 'supplier_lead_costs'];
|
||||
|
||||
public function handle(): int
|
||||
public function handle(MonthlyPartitionManager $manager): int
|
||||
{
|
||||
$ahead = max(1, (int) $this->option('ahead'));
|
||||
$now = Carbon::now()->startOfMonth();
|
||||
@@ -47,27 +40,17 @@ class PartitionsCreateMonths extends Command
|
||||
|
||||
for ($i = 0; $i <= $ahead; $i++) {
|
||||
$monthStart = $now->copy()->addMonths($i);
|
||||
$monthEnd = $monthStart->copy()->addMonth();
|
||||
|
||||
foreach (self::PARTITIONED_TABLES as $table) {
|
||||
foreach (MonthlyPartitionManager::PARTITIONED_TABLES as $table) {
|
||||
$partitionName = sprintf('%s_%s', $table, $monthStart->format('Y_m'));
|
||||
|
||||
if ($this->partitionExists($partitionName)) {
|
||||
if ($manager->ensureMonth($table, $monthStart)) {
|
||||
$created++;
|
||||
$this->info(" create <fg=green>{$partitionName}</>");
|
||||
} else {
|
||||
$skipped++;
|
||||
$this->line(" skip <fg=gray>{$partitionName}</> (already exists)");
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
DB::statement(sprintf(
|
||||
"CREATE TABLE %s PARTITION OF %s FOR VALUES FROM ('%s') TO ('%s')",
|
||||
$partitionName,
|
||||
$table,
|
||||
$monthStart->format('Y-m-d'),
|
||||
$monthEnd->format('Y-m-d'),
|
||||
));
|
||||
$created++;
|
||||
$this->info(" create <fg=green>{$partitionName}</> [{$monthStart->format('Y-m-d')} → {$monthEnd->format('Y-m-d')})");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,17 +59,4 @@ class PartitionsCreateMonths extends Command
|
||||
|
||||
return self::SUCCESS;
|
||||
}
|
||||
|
||||
/**
|
||||
* Проверка существования партиции через pg_class (быстрее information_schema).
|
||||
*/
|
||||
private function partitionExists(string $name): bool
|
||||
{
|
||||
$row = DB::selectOne(
|
||||
"SELECT 1 AS exists FROM pg_class WHERE relname = ? AND relkind = 'r'",
|
||||
[$name],
|
||||
);
|
||||
|
||||
return $row !== null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,11 +60,14 @@ final class AdminPricingTiersController extends Controller
|
||||
/** POST /api/admin/pricing-tiers */
|
||||
public function store(Request $request): JsonResponse
|
||||
{
|
||||
$todayMsk = Carbon::now('Europe/Moscow')->toDateString();
|
||||
|
||||
$request->validate([
|
||||
'tiers' => ['required', 'array', 'size:7'],
|
||||
'tiers.*.tier_no' => ['required', 'integer', 'between:1,7'],
|
||||
'tiers.*.leads_in_tier' => ['nullable', 'integer', 'min:1'],
|
||||
'tiers.*.price_rub' => ['required', 'numeric', 'min:0'],
|
||||
'effective_from' => ['sometimes', 'date_format:Y-m-d', 'after:'.$todayMsk],
|
||||
]);
|
||||
|
||||
/** @var array<int, array{tier_no:int, leads_in_tier:?int, price_rub:string|float}> $tiers */
|
||||
@@ -89,7 +92,8 @@ final class AdminPricingTiersController extends Controller
|
||||
}
|
||||
}
|
||||
|
||||
$effectiveFrom = Carbon::now('Europe/Moscow')->startOfMonth()->addMonth()->toDateString();
|
||||
$effectiveFrom = $request->input('effective_from')
|
||||
?? Carbon::now('Europe/Moscow')->startOfMonth()->addMonth()->toDateString();
|
||||
$adminUserId = $this->resolveAdminUserId($request);
|
||||
|
||||
DB::transaction(function () use ($tiers, $effectiveFrom, $adminUserId, $request): void {
|
||||
|
||||
@@ -7,7 +7,6 @@ namespace App\Http\Controllers\Api;
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Models\ActivityLog;
|
||||
use App\Models\Deal;
|
||||
use App\Models\Tenant;
|
||||
use Illuminate\Http\JsonResponse;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
@@ -20,6 +19,8 @@ use Illuminate\Support\Facades\DB;
|
||||
* bulk + export + helpers). Этот класс отвечает только за многоразовые
|
||||
* массовые операции; single-resource действия остаются в DealController.
|
||||
*
|
||||
* J1 (Sprint 3F): auth:sanctum+tenant, tenant_id из auth()->user().
|
||||
*
|
||||
* O-perf-01: N+1 устранён.
|
||||
*
|
||||
* transition: сначала SELECT всех сделок tenant'а из ids, чтобы отфильтровать
|
||||
@@ -41,23 +42,19 @@ class DealBulkActionController extends Controller
|
||||
/**
|
||||
* POST /api/deals/transition — bulk status-update.
|
||||
*
|
||||
* Body: {tenant_id, ids: [int...], status: slug}.
|
||||
* Body: {ids: [int...], status: slug}.
|
||||
* Response: {updated, requested, status} (updated = реально изменённых,
|
||||
* без NO-OP).
|
||||
*/
|
||||
public function transition(Request $request): JsonResponse
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'tenant_id' => 'required|integer|min:1',
|
||||
'ids' => 'required|array|min:1|max:1000',
|
||||
'ids.*' => 'integer|min:1',
|
||||
'status' => 'required|string|max:50',
|
||||
]);
|
||||
|
||||
$tenant = Tenant::find($validated['tenant_id']);
|
||||
if ($tenant === null) {
|
||||
return response()->json(['message' => 'Тенант не найден.'], 404);
|
||||
}
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
$statusExists = DB::table('lead_statuses')->where('slug', $validated['status'])->exists();
|
||||
if (! $statusExists) {
|
||||
@@ -67,14 +64,14 @@ class DealBulkActionController extends Controller
|
||||
], 422);
|
||||
}
|
||||
|
||||
$updated = DB::transaction(function () use ($validated, $tenant) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenant->id);
|
||||
$updated = DB::transaction(function () use ($validated, $tenantId) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
// Фаза 1: SELECT — нужны id и предыдущий status для каждой строки,
|
||||
// чтобы (а) отфильтровать NO-OP и (б) сохранить prev в context.from.
|
||||
// Defense-in-depth where(tenant_id) — защита от кросс-tenant id.
|
||||
$rows = Deal::query()
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereIn('id', $validated['ids'])
|
||||
->get(['id', 'status']);
|
||||
|
||||
@@ -88,7 +85,7 @@ class DealBulkActionController extends Controller
|
||||
|
||||
// Фаза 2: bulk-UPDATE 1 запросом вместо N.
|
||||
Deal::query()
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereIn('id', $changedIds)
|
||||
->update([
|
||||
'status' => $validated['status'],
|
||||
@@ -100,7 +97,7 @@ class DealBulkActionController extends Controller
|
||||
// массив сериализуем в JSON руками, остальные scalar-поля передаём
|
||||
// напрямую. Триггер audit_chain_hash() заполнит log_hash на уровне БД.
|
||||
$logRows = $changed->map(fn (Deal $d) => [
|
||||
'tenant_id' => $tenant->id,
|
||||
'tenant_id' => $tenantId,
|
||||
'user_id' => null,
|
||||
'deal_id' => $d->id,
|
||||
'event' => ActivityLog::EVENT_DEAL_STATUS_CHANGED,
|
||||
@@ -127,7 +124,7 @@ class DealBulkActionController extends Controller
|
||||
/**
|
||||
* DELETE /api/deals — bulk soft-delete.
|
||||
*
|
||||
* Body: {tenant_id, ids: [int...]}.
|
||||
* Body: {ids: [int...]}.
|
||||
* Response: {deleted, requested}.
|
||||
*
|
||||
* Soft-delete сохраняется (см. документацию в DealController.destroy на
|
||||
@@ -137,23 +134,19 @@ class DealBulkActionController extends Controller
|
||||
public function destroy(Request $request): JsonResponse
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'tenant_id' => 'required|integer|min:1',
|
||||
'ids' => 'required|array|min:1|max:1000',
|
||||
'ids.*' => 'integer|min:1',
|
||||
]);
|
||||
|
||||
$tenant = Tenant::find($validated['tenant_id']);
|
||||
if ($tenant === null) {
|
||||
return response()->json(['message' => 'Тенант не найден.'], 404);
|
||||
}
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
$deleted = DB::transaction(function () use ($validated, $tenant) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenant->id);
|
||||
$deleted = DB::transaction(function () use ($validated, $tenantId) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
// SELECT id'шников живых сделок tenant'а из ids — для bulk-INSERT
|
||||
// в activity_log по списку реально удаляемых (NO-OP idempotency).
|
||||
$targetIds = Deal::query()
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereIn('id', $validated['ids'])
|
||||
->whereNull('deleted_at')
|
||||
->pluck('id')
|
||||
@@ -166,7 +159,7 @@ class DealBulkActionController extends Controller
|
||||
$now = now();
|
||||
|
||||
Deal::query()
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereIn('id', $targetIds)
|
||||
->whereNull('deleted_at')
|
||||
->update([
|
||||
@@ -175,7 +168,7 @@ class DealBulkActionController extends Controller
|
||||
]);
|
||||
|
||||
$logRows = array_map(fn (int $id) => [
|
||||
'tenant_id' => $tenant->id,
|
||||
'tenant_id' => $tenantId,
|
||||
'user_id' => null,
|
||||
'deal_id' => $id,
|
||||
'event' => ActivityLog::EVENT_DEAL_DELETED,
|
||||
@@ -197,30 +190,26 @@ class DealBulkActionController extends Controller
|
||||
/**
|
||||
* POST /api/deals/restore — bulk restore soft-deleted.
|
||||
*
|
||||
* Body: {tenant_id, ids: [int...]}.
|
||||
* Body: {ids: [int...]}.
|
||||
* Response: {restored, requested}.
|
||||
*/
|
||||
public function restore(Request $request): JsonResponse
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'tenant_id' => 'required|integer|min:1',
|
||||
'ids' => 'required|array|min:1|max:1000',
|
||||
'ids.*' => 'integer|min:1',
|
||||
]);
|
||||
|
||||
$tenant = Tenant::find($validated['tenant_id']);
|
||||
if ($tenant === null) {
|
||||
return response()->json(['message' => 'Тенант не найден.'], 404);
|
||||
}
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
$restored = DB::transaction(function () use ($validated, $tenant) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenant->id);
|
||||
$restored = DB::transaction(function () use ($validated, $tenantId) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
// withTrashed обходит SoftDeletes global scope; whereNotNull —
|
||||
// NO-OP idempotency для уже живых.
|
||||
$targetIds = Deal::query()
|
||||
->withTrashed()
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereIn('id', $validated['ids'])
|
||||
->whereNotNull('deleted_at')
|
||||
->pluck('id')
|
||||
@@ -234,7 +223,7 @@ class DealBulkActionController extends Controller
|
||||
|
||||
Deal::query()
|
||||
->withTrashed()
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereIn('id', $targetIds)
|
||||
->whereNotNull('deleted_at')
|
||||
->update([
|
||||
@@ -243,7 +232,7 @@ class DealBulkActionController extends Controller
|
||||
]);
|
||||
|
||||
$logRows = array_map(fn (int $id) => [
|
||||
'tenant_id' => $tenant->id,
|
||||
'tenant_id' => $tenantId,
|
||||
'user_id' => null,
|
||||
'deal_id' => $id,
|
||||
'event' => ActivityLog::EVENT_DEAL_RESTORED,
|
||||
|
||||
@@ -9,7 +9,6 @@ use App\Models\ActivityLog;
|
||||
use App\Models\Deal;
|
||||
use App\Models\Project;
|
||||
use App\Models\SupplierLeadCost;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use App\Services\SupplierResolver;
|
||||
use Illuminate\Http\JsonResponse;
|
||||
@@ -27,9 +26,7 @@ use Illuminate\Support\Facades\DB;
|
||||
* `WebhookReceiveController` + `ProcessWebhookJob` (асинхронно через очередь
|
||||
* с advisory lock + dedup). Этот controller — для ручных action'ов из UI.
|
||||
*
|
||||
* На MVP без auth-middleware (multi-tenant контекст резолвится по
|
||||
* `tenant_id` параметру). Production: middleware('auth:sanctum')+'tenant'
|
||||
* → tenant_id из request()->user()->tenant_id; user ID для manager/audit.
|
||||
* J1 (Sprint 3F): auth:sanctum+tenant, tenant_id из auth()->user().
|
||||
*
|
||||
* Manual-create отличается от webhook'а:
|
||||
* - source_crm_id = NULL (не из webhook).
|
||||
@@ -42,7 +39,7 @@ use Illuminate\Support\Facades\DB;
|
||||
class DealController extends Controller
|
||||
{
|
||||
/**
|
||||
* GET /api/deals?tenant_id={id}&status_in[]=...&project_id=...&manager_id=...&search=...&limit=...&offset=...
|
||||
* GET /api/deals?status_in[]=...&project_id=...&manager_id=...&search=...&limit=...&offset=...
|
||||
*
|
||||
* Список сделок tenant'а с relations (project.name, manager.first/last/email).
|
||||
* Используется в `DealsView`/`KanbanView` вместо MOCK_DEALS.
|
||||
@@ -53,20 +50,10 @@ class DealController extends Controller
|
||||
* (received_at, id)).
|
||||
*
|
||||
* RLS: SET LOCAL app.current_tenant_id внутри транзакции (PgBouncer-safe).
|
||||
* Чужие сделки отфильтрует политика, даже если клиент подсунет чужой
|
||||
* tenant_id (без auth — на MVP, на prod — middleware).
|
||||
*/
|
||||
public function index(Request $request): JsonResponse
|
||||
{
|
||||
$tenantId = (int) $request->query('tenant_id', '0');
|
||||
if ($tenantId < 1) {
|
||||
return response()->json(['message' => 'Параметр tenant_id обязателен.'], 422);
|
||||
}
|
||||
|
||||
$tenant = Tenant::find($tenantId);
|
||||
if ($tenant === null) {
|
||||
return response()->json(['message' => 'Тенант не найден.'], 404);
|
||||
}
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
$statuses = (array) $request->query('status_in', []);
|
||||
$projectId = $request->query('project_id') !== null ? (int) $request->query('project_id') : null;
|
||||
@@ -75,6 +62,7 @@ class DealController extends Controller
|
||||
$limit = max(1, min(500, (int) $request->query('limit', '100')));
|
||||
$offset = max(0, (int) $request->query('offset', '0'));
|
||||
$onlyDeleted = $request->boolean('only_deleted');
|
||||
$countOnly = $request->boolean('count_only');
|
||||
$cursorRaw = (string) $request->query('cursor', '');
|
||||
|
||||
// Sprint 4 Phase A (audit O-perf-04): keyset pagination через cursor.
|
||||
@@ -93,7 +81,7 @@ class DealController extends Controller
|
||||
$cursor = ['r' => (string) $parsed['r'], 'i' => (int) $parsed['i']];
|
||||
}
|
||||
|
||||
[$deals, $total, $nextCursor] = DB::transaction(function () use ($tenantId, $statuses, $projectId, $managerId, $search, $limit, $offset, $onlyDeleted, $cursor) {
|
||||
[$deals, $total, $nextCursor] = DB::transaction(function () use ($tenantId, $statuses, $projectId, $managerId, $search, $limit, $offset, $onlyDeleted, $cursor, $countOnly) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
// Defense-in-depth: явный where(tenant_id) поверх RLS — на тестах
|
||||
@@ -128,6 +116,12 @@ class DealController extends Controller
|
||||
});
|
||||
}
|
||||
|
||||
// Audit B2: count_only — отдаём только COUNT(*), пропуская SELECT строк
|
||||
// и cursor/offset-логику (лёгкий запрос для бейджа в сайдбаре).
|
||||
if ($countOnly) {
|
||||
return [collect(), $query->count(), null];
|
||||
}
|
||||
|
||||
if ($cursor !== null) {
|
||||
// Keyset: PG row constructor через индекс на (received_at DESC, id DESC).
|
||||
// Не считаем total (дорого без COUNT(*); клиент при необходимости
|
||||
@@ -172,6 +166,10 @@ class DealController extends Controller
|
||||
return [$rows, $total, $next];
|
||||
});
|
||||
|
||||
if ($countOnly) {
|
||||
return response()->json(['total' => $total]);
|
||||
}
|
||||
|
||||
$payload = [
|
||||
'deals' => $deals->map(fn (Deal $d) => [
|
||||
'id' => $d->id,
|
||||
@@ -203,7 +201,7 @@ class DealController extends Controller
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/deals/{id}?tenant_id={id} — детали сделки + recent activity events.
|
||||
* GET /api/deals/{id} — детали сделки + recent activity events.
|
||||
*
|
||||
* Используется в DealDetailDrawer (правая панель). Возвращает deal с
|
||||
* relations + до 50 последних activity_log событий по этой сделке.
|
||||
@@ -213,15 +211,7 @@ class DealController extends Controller
|
||||
*/
|
||||
public function show(Request $request, int $id): JsonResponse
|
||||
{
|
||||
$tenantId = (int) $request->query('tenant_id', '0');
|
||||
if ($tenantId < 1) {
|
||||
return response()->json(['message' => 'Параметр tenant_id обязателен.'], 422);
|
||||
}
|
||||
|
||||
$tenant = Tenant::find($tenantId);
|
||||
if ($tenant === null) {
|
||||
return response()->json(['message' => 'Тенант не найден.'], 404);
|
||||
}
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
[$deal, $events] = DB::transaction(function () use ($tenantId, $id) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
@@ -291,7 +281,7 @@ class DealController extends Controller
|
||||
/**
|
||||
* PATCH /api/deals/{id} — частичное редактирование сделки из DealDetailDrawer.
|
||||
*
|
||||
* Body (все поля optional, должно быть хотя бы одно): {tenant_id, comment?,
|
||||
* Body (все поля optional, должно быть хотя бы одно): {comment?,
|
||||
* manager_id?, status?}.
|
||||
*
|
||||
* Каждое изменение пишется в ActivityLog с правильным event-type:
|
||||
@@ -309,16 +299,12 @@ class DealController extends Controller
|
||||
public function update(Request $request, int $id): JsonResponse
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'tenant_id' => 'required|integer|min:1',
|
||||
'comment' => 'nullable|string|max:5000',
|
||||
'manager_id' => 'nullable|integer|min:1',
|
||||
'status' => 'nullable|string|max:50',
|
||||
]);
|
||||
|
||||
$tenant = Tenant::find($validated['tenant_id']);
|
||||
if ($tenant === null) {
|
||||
return response()->json(['message' => 'Тенант не найден.'], 404);
|
||||
}
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
// Validate status slug если передан.
|
||||
if (array_key_exists('status', $validated) && $validated['status'] !== null) {
|
||||
@@ -335,7 +321,7 @@ class DealController extends Controller
|
||||
if (array_key_exists('manager_id', $validated) && $validated['manager_id'] !== null) {
|
||||
$managerExists = User::query()
|
||||
->where('id', $validated['manager_id'])
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereNull('deleted_at')
|
||||
->where('is_active', true)
|
||||
->exists();
|
||||
@@ -347,11 +333,11 @@ class DealController extends Controller
|
||||
}
|
||||
}
|
||||
|
||||
$deal = DB::transaction(function () use ($validated, $tenant, $id) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenant->id);
|
||||
$deal = DB::transaction(function () use ($validated, $tenantId, $id) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
$deal = Deal::query()
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->where('id', $id)
|
||||
->first();
|
||||
|
||||
@@ -363,7 +349,7 @@ class DealController extends Controller
|
||||
if (array_key_exists('comment', $validated) && $deal->comment !== $validated['comment']) {
|
||||
$deal->comment = $validated['comment'];
|
||||
ActivityLog::create([
|
||||
'tenant_id' => $tenant->id,
|
||||
'tenant_id' => $tenantId,
|
||||
'user_id' => null,
|
||||
'deal_id' => $deal->id,
|
||||
'event' => 'deal.commented',
|
||||
@@ -376,7 +362,7 @@ class DealController extends Controller
|
||||
$deal->manager_id = $validated['manager_id'];
|
||||
$deal->assigned_at = $validated['manager_id'] !== null ? now() : null;
|
||||
ActivityLog::create([
|
||||
'tenant_id' => $tenant->id,
|
||||
'tenant_id' => $tenantId,
|
||||
'user_id' => null,
|
||||
'deal_id' => $deal->id,
|
||||
'event' => ActivityLog::EVENT_DEAL_ASSIGNED,
|
||||
@@ -388,7 +374,7 @@ class DealController extends Controller
|
||||
$previousStatus = $deal->status;
|
||||
$deal->status = $validated['status'];
|
||||
ActivityLog::create([
|
||||
'tenant_id' => $tenant->id,
|
||||
'tenant_id' => $tenantId,
|
||||
'user_id' => null,
|
||||
'deal_id' => $deal->id,
|
||||
'event' => ActivityLog::EVENT_DEAL_STATUS_CHANGED,
|
||||
@@ -425,7 +411,6 @@ class DealController extends Controller
|
||||
public function store(Request $request): JsonResponse
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'tenant_id' => 'required|integer|min:1',
|
||||
'project_name' => 'required|string|max:255',
|
||||
'phone' => 'required|string|max:20',
|
||||
'contact_name' => 'nullable|string|max:255',
|
||||
@@ -434,17 +419,14 @@ class DealController extends Controller
|
||||
'comment' => 'nullable|string|max:5000',
|
||||
]);
|
||||
|
||||
$tenant = Tenant::find($validated['tenant_id']);
|
||||
if ($tenant === null) {
|
||||
return response()->json(['message' => 'Тенант не найден.'], 404);
|
||||
}
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
// Manager FK guard: если manager_id передан, он должен принадлежать
|
||||
// этому tenant'у. Иначе можно назначить чужого менеджера на свою сделку.
|
||||
if (isset($validated['manager_id'])) {
|
||||
$managerExists = User::query()
|
||||
->where('id', $validated['manager_id'])
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereNull('deleted_at')
|
||||
->where('is_active', true)
|
||||
->exists();
|
||||
@@ -459,16 +441,16 @@ class DealController extends Controller
|
||||
$statusSlug = $validated['status'] ?? 'new';
|
||||
|
||||
// Транзакция + RLS: SET LOCAL внутри (PgBouncer-safe).
|
||||
$deal = DB::transaction(function () use ($validated, $tenant, $statusSlug) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenant->id);
|
||||
$deal = DB::transaction(function () use ($validated, $tenantId, $statusSlug) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
$project = Project::firstOrCreate(
|
||||
['tenant_id' => $tenant->id, 'name' => $validated['project_name']],
|
||||
['tenant_id' => $tenantId, 'name' => $validated['project_name']],
|
||||
['type' => 'manual'],
|
||||
);
|
||||
|
||||
$deal = Deal::create([
|
||||
'tenant_id' => $tenant->id,
|
||||
'tenant_id' => $tenantId,
|
||||
'source_crm_id' => null, // manual
|
||||
'project_id' => $project->id,
|
||||
'phone' => $validated['phone'],
|
||||
@@ -499,7 +481,7 @@ class DealController extends Controller
|
||||
}
|
||||
|
||||
ActivityLog::create([
|
||||
'tenant_id' => $tenant->id,
|
||||
'tenant_id' => $tenantId,
|
||||
'user_id' => null, // на prod — request()->user()->id
|
||||
'deal_id' => $deal->id,
|
||||
'event' => ActivityLog::EVENT_DEAL_CREATED,
|
||||
|
||||
@@ -6,7 +6,6 @@ namespace App\Http\Controllers\Api;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Models\Deal;
|
||||
use App\Models\Tenant;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use OpenSpout\Common\Entity\Row;
|
||||
@@ -21,13 +20,15 @@ use Symfony\Component\HttpFoundation\StreamedResponse;
|
||||
*
|
||||
* Извлечено из DealController (Sprint 3 Phase A, audit O-refactor-01).
|
||||
*
|
||||
* J1 (Sprint 3F): auth:sanctum+tenant, tenant_id из auth()->user().
|
||||
*
|
||||
* O-perf-05: streaming устраняет memory pressure. PhpSpreadsheet строил
|
||||
* полный объект .xlsx в памяти (для 10K сделок ≈ 100+ MB). OpenSpout пишет
|
||||
* в php://output постранично через Writer + Row::fromValues и chunkById(500)
|
||||
* по сделкам — пик памяти O(1) от размера экспорта.
|
||||
*
|
||||
* API контракт сохранён:
|
||||
* POST /api/deals/export {tenant_id, ids[], format?: csv|xlsx}
|
||||
* POST /api/deals/export {ids[], format?: csv|xlsx}
|
||||
* Headers Content-Type / Content-Disposition без изменений.
|
||||
* CSV: UTF-8 + BOM + ;-разделитель (Excel-friendly RU-локаль).
|
||||
* XLSX: bold-header + auto-size columns.
|
||||
@@ -43,16 +44,12 @@ class DealExportController extends Controller
|
||||
public function export(Request $request): StreamedResponse
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'tenant_id' => 'required|integer|min:1',
|
||||
'ids' => 'required|array|min:1|max:10000',
|
||||
'ids.*' => 'integer|min:1',
|
||||
'format' => 'nullable|string|in:csv,xlsx',
|
||||
]);
|
||||
|
||||
$tenant = Tenant::find($validated['tenant_id']);
|
||||
if ($tenant === null) {
|
||||
abort(404, 'Тенант не найден.');
|
||||
}
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
$format = $validated['format'] ?? 'csv';
|
||||
$filename = 'deals_export_'.now()->format('Y-m-d').'.'.$format;
|
||||
@@ -67,13 +64,13 @@ class DealExportController extends Controller
|
||||
'Content-Disposition' => 'attachment; filename="'.$filename.'"',
|
||||
];
|
||||
|
||||
return new StreamedResponse(function () use ($validated, $tenant, $format) {
|
||||
return new StreamedResponse(function () use ($validated, $tenantId, $format) {
|
||||
// RLS-контекст должен быть установлен внутри транзакции на момент
|
||||
// фактического SELECT. StreamedResponse callback вызывается уже
|
||||
// после Laravel-response pipeline'а, поэтому открываем транзакцию
|
||||
// прямо здесь.
|
||||
DB::transaction(function () use ($validated, $tenant, $format) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenant->id);
|
||||
DB::transaction(function () use ($validated, $tenantId, $format) {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
$writer = $this->openWriter($format);
|
||||
$writer->openToFile('php://output');
|
||||
@@ -93,7 +90,7 @@ class DealExportController extends Controller
|
||||
// chunkById(500) — keyset-friendly; в нашем DealsView это
|
||||
// редкий тяжёлый action, экспортировать могут до 10K id.
|
||||
Deal::query()
|
||||
->where('tenant_id', $tenant->id)
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereIn('id', $validated['ids'])
|
||||
->orderBy('id')
|
||||
->chunkById(500, function ($deals) use ($writer) {
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Http\Controllers\Api;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Http\Requests\ResolveUnknownStatusesRequest;
|
||||
use App\Http\Requests\StoreImportRequest;
|
||||
use App\Jobs\ImportLeadsJob;
|
||||
use App\Models\ImportLog;
|
||||
use App\Models\ImportUnknownStatus;
|
||||
use Illuminate\Http\JsonResponse;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Str;
|
||||
|
||||
/**
|
||||
* CSV-импорт исторических лидов из crm.bp-gr.ru (ТЗ §6).
|
||||
*
|
||||
* Все маршруты — под auth:sanctum + tenant (RLS-контекст задан middleware).
|
||||
* tenant_id берётся из авторизованного пользователя, не из запроса.
|
||||
*/
|
||||
class ImportController extends Controller
|
||||
{
|
||||
/**
|
||||
* POST /api/imports — загрузка CSV, создание import_log, dispatch job'а.
|
||||
*/
|
||||
public function store(StoreImportRequest $request): JsonResponse
|
||||
{
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
$file = $request->file('file');
|
||||
$storedName = Str::uuid()->toString().'.csv';
|
||||
$path = $file->storeAs("imports/{$tenantId}", $storedName, 'local');
|
||||
|
||||
$log = ImportLog::create([
|
||||
'tenant_id' => $tenantId,
|
||||
'user_id' => $request->user()->id,
|
||||
'filename' => $file->getClientOriginalName(),
|
||||
'file_path' => $path,
|
||||
'status' => 'pending',
|
||||
'entity_type' => 'leads',
|
||||
'source_system' => 'crm.bp-gr.ru',
|
||||
'dry_run' => $request->boolean('dry_run'),
|
||||
]);
|
||||
|
||||
ImportLeadsJob::dispatch($log->id, $tenantId);
|
||||
|
||||
return response()->json(['data' => $this->toResource($log)], 201);
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/imports — история импортов тенанта (RLS отфильтрует по tenant).
|
||||
*
|
||||
* Defense-in-depth: явный where(tenant_id) поверх RLS — на dev через
|
||||
* `postgres` superuser RLS обходится BYPASSRLS, app-фильтр гарантирует
|
||||
* изоляцию (паттерн из DealController).
|
||||
*/
|
||||
public function index(Request $request): JsonResponse
|
||||
{
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
$logs = ImportLog::query()
|
||||
->where('tenant_id', $tenantId)
|
||||
->orderByDesc('id')
|
||||
->limit(50)
|
||||
->get()
|
||||
->map(fn (ImportLog $log) => $this->toResource($log));
|
||||
|
||||
return response()->json(['data' => $logs]);
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/imports/{importLog} — прогресс одного импорта (для polling'а).
|
||||
*
|
||||
* Defense-in-depth: явная проверка tenant_id на принадлежность поверх RLS.
|
||||
*/
|
||||
public function show(Request $request, ImportLog $importLog): JsonResponse
|
||||
{
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
abort_if($importLog->tenant_id !== $tenantId, 403, 'Доступ к импорту другого тенанта запрещён.');
|
||||
|
||||
return response()->json(['data' => $this->toResource($importLog)]);
|
||||
}
|
||||
|
||||
/**
|
||||
* GET /api/imports/unknown-statuses — незамапленные статусы (вход wizard'а §6.6).
|
||||
*
|
||||
* Defense-in-depth: явный where(tenant_id) поверх RLS.
|
||||
*/
|
||||
public function unknownStatuses(Request $request): JsonResponse
|
||||
{
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
|
||||
$rows = ImportUnknownStatus::query()
|
||||
->where('tenant_id', $tenantId)
|
||||
->unresolved()
|
||||
->orderByDesc('occurrences')
|
||||
->get()
|
||||
->map(fn (ImportUnknownStatus $s) => [
|
||||
'id' => $s->id,
|
||||
'status_ru' => $s->status_ru,
|
||||
'occurrences' => $s->occurrences,
|
||||
]);
|
||||
|
||||
return response()->json(['data' => $rows]);
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /api/imports/unknown-statuses/resolve — ручной маппинг статусов.
|
||||
*
|
||||
* Defense-in-depth: явный where(tenant_id) поверх RLS.
|
||||
*/
|
||||
public function resolveUnknownStatuses(ResolveUnknownStatusesRequest $request): JsonResponse
|
||||
{
|
||||
$tenantId = (int) $request->user()->tenant_id;
|
||||
$userId = (int) $request->user()->id;
|
||||
|
||||
DB::transaction(function () use ($request, $tenantId, $userId): void {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
foreach ($request->validated()['mappings'] as $mapping) {
|
||||
ImportUnknownStatus::query()
|
||||
->where('tenant_id', $tenantId)
|
||||
->where('status_ru', $mapping['status_ru'])
|
||||
->update([
|
||||
'mapped_to_slug' => $mapping['slug'],
|
||||
'resolved_at' => now(),
|
||||
'resolved_by' => $userId,
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
return response()->json(['data' => ['resolved' => count($request->validated()['mappings'])]]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array<string, mixed>
|
||||
*/
|
||||
private function toResource(ImportLog $log): array
|
||||
{
|
||||
return [
|
||||
'id' => $log->id,
|
||||
'filename' => $log->filename,
|
||||
'status' => $log->status,
|
||||
'rows_total' => $log->rows_total,
|
||||
'rows_added' => $log->rows_added,
|
||||
'rows_updated' => $log->rows_updated,
|
||||
'rows_skipped' => $log->rows_skipped,
|
||||
'unknown_statuses_count' => $log->unknown_statuses_count,
|
||||
'dry_run' => $log->dry_run,
|
||||
'error_message' => $log->error_message,
|
||||
'started_at' => $log->started_at?->toIso8601String(),
|
||||
'finished_at' => $log->finished_at?->toIso8601String(),
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Http\Middleware;
|
||||
|
||||
use Closure;
|
||||
use Illuminate\Http\Request;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
|
||||
/**
|
||||
* Гейт SaaS-admin зоны (/api/admin/*) — audit-находка J2.
|
||||
*
|
||||
* СТАБ (Sprint 3F): полноценная авторизация saas-admin требует Yandex 360
|
||||
* SSO-входа, который гейтится Б-1 (регистрация ООО) + DO-4. До их закрытия
|
||||
* реального механизма аутентификации нет.
|
||||
*
|
||||
* Поведение стаба:
|
||||
* - dev / testing (local, testing) → пропускаем. Admin-панель работает на
|
||||
* dev; admin_user_id передаётся параметром (трейт ResolvesAdminUserId).
|
||||
* - прочие окружения (production / staging) → fail-closed 503: зона
|
||||
* закрыта до подключения реального SSO. Явный 503 лучше, чем тихо
|
||||
* открытый /api/admin/* в проде.
|
||||
*
|
||||
* TODO (после Б-1 + DO-4): заменить на проверку Yandex 360 SSO-сессии
|
||||
* saas-admin (отдельный guard) + роль (compliance и т.п. где требуется).
|
||||
*/
|
||||
class EnsureSaasAdmin
|
||||
{
|
||||
public function handle(Request $request, Closure $next): Response
|
||||
{
|
||||
if (! app()->environment('local', 'testing')) {
|
||||
abort(503, 'SaaS-admin авторизация не настроена (ожидает Б-1 + DO-4).');
|
||||
}
|
||||
|
||||
return $next($request);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Http\Requests;
|
||||
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
use Illuminate\Validation\Rule;
|
||||
|
||||
/**
|
||||
* Валидация ручного маппинга неизвестных статусов воронки (§6.4 wizard).
|
||||
*/
|
||||
class ResolveUnknownStatusesRequest extends FormRequest
|
||||
{
|
||||
public function authorize(): bool
|
||||
{
|
||||
return $this->user() !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array<string, mixed>
|
||||
*/
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'mappings' => ['required', 'array', 'min:1'],
|
||||
'mappings.*.status_ru' => ['required', 'string', 'max:100'],
|
||||
'mappings.*.slug' => ['required', 'string', Rule::exists('lead_statuses', 'slug')],
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Http\Requests;
|
||||
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
|
||||
/**
|
||||
* Валидация загрузки CSV-файла импорта (ТЗ §6.2).
|
||||
*/
|
||||
class StoreImportRequest extends FormRequest
|
||||
{
|
||||
public function authorize(): bool
|
||||
{
|
||||
return $this->user() !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array<string, mixed>
|
||||
*/
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
// mimes csv,txt — экспорт crm.bp-gr.ru отдаётся как text/csv или text/plain.
|
||||
'file' => ['required', 'file', 'mimes:csv,txt', 'max:10240'],
|
||||
'dry_run' => ['sometimes', 'boolean'],
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Jobs;
|
||||
|
||||
use App\Mail\ImportCompletedNotification;
|
||||
use App\Models\ImportLog;
|
||||
use App\Models\User;
|
||||
use App\Services\Import\CsvLeadsParser;
|
||||
use App\Services\Import\HistoricalImportService;
|
||||
use Illuminate\Bus\Queueable;
|
||||
use Illuminate\Contracts\Queue\ShouldQueue;
|
||||
use Illuminate\Foundation\Bus\Dispatchable;
|
||||
use Illuminate\Queue\InteractsWithQueue;
|
||||
use Illuminate\Queue\SerializesModels;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
use Illuminate\Support\Facades\Mail;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
use RuntimeException;
|
||||
use Throwable;
|
||||
|
||||
/**
|
||||
* Асинхронная обработка CSV-импорта исторических лидов (ТЗ §6.6).
|
||||
*
|
||||
* Жизненный цикл import_log: pending → processing → done | failed.
|
||||
* RLS: каждый доступ к БД задаёт SET LOCAL app.current_tenant_id (воркер
|
||||
* вне middleware-контекста — паритет с ProcessWebhookJob).
|
||||
*/
|
||||
class ImportLeadsJob implements ShouldQueue
|
||||
{
|
||||
use Dispatchable;
|
||||
use InteractsWithQueue;
|
||||
use Queueable;
|
||||
use SerializesModels;
|
||||
|
||||
public int $tries = 1;
|
||||
|
||||
public int $timeout = 600;
|
||||
|
||||
public function __construct(
|
||||
public int $importLogId,
|
||||
public int $tenantId,
|
||||
) {}
|
||||
|
||||
public function handle(HistoricalImportService $service, CsvLeadsParser $parser): void
|
||||
{
|
||||
$log = $this->loadLog();
|
||||
if ($log === null) {
|
||||
Log::error('import.log_not_found', ['import_log_id' => $this->importLogId]);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$this->updateLog($log->id, ['status' => 'processing', 'started_at' => now()]);
|
||||
|
||||
try {
|
||||
if (! Storage::disk('local')->exists($log->file_path)) {
|
||||
throw new RuntimeException("Файл импорта не найден: {$log->file_path}");
|
||||
}
|
||||
|
||||
$content = (string) Storage::disk('local')->get($log->file_path);
|
||||
$parsed = $parser->parse($content);
|
||||
|
||||
$result = $service->import($this->tenantId, $log->user_id, $log, $parsed->rows);
|
||||
|
||||
$this->updateLog($log->id, [
|
||||
'status' => 'done',
|
||||
'rows_total' => count($parsed->rows) + count($parsed->errors),
|
||||
'rows_added' => $result->added,
|
||||
'rows_updated' => $result->updated,
|
||||
'rows_skipped' => count($parsed->errors) + $result->skipped,
|
||||
'unknown_statuses_count' => count($result->unknownStatuses),
|
||||
'finished_at' => now(),
|
||||
]);
|
||||
|
||||
$this->notify($log->user_id, 'done');
|
||||
} catch (Throwable $e) {
|
||||
Log::error('import.job_failed', ['import_log_id' => $log->id, 'error' => $e->getMessage()]);
|
||||
$this->updateLog($log->id, [
|
||||
'status' => 'failed',
|
||||
'error_message' => $e->getMessage(),
|
||||
'finished_at' => now(),
|
||||
]);
|
||||
$this->notify($log->user_id, 'failed');
|
||||
}
|
||||
}
|
||||
|
||||
private function loadLog(): ?ImportLog
|
||||
{
|
||||
return DB::transaction(function (): ?ImportLog {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$this->tenantId);
|
||||
|
||||
return ImportLog::query()->find($this->importLogId);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array<string, mixed> $attributes
|
||||
*/
|
||||
private function updateLog(int $logId, array $attributes): void
|
||||
{
|
||||
DB::transaction(function () use ($logId, $attributes): void {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$this->tenantId);
|
||||
ImportLog::query()->whereKey($logId)->update($attributes);
|
||||
});
|
||||
}
|
||||
|
||||
private function notify(int $userId, string $outcome): void
|
||||
{
|
||||
$log = $this->loadLog();
|
||||
$user = DB::transaction(function () use ($userId): ?User {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$this->tenantId);
|
||||
|
||||
return User::query()->find($userId);
|
||||
});
|
||||
|
||||
if ($log === null || $user === null || $user->email === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
Mail::to($user->email)->send(new ImportCompletedNotification($log, $outcome));
|
||||
} catch (Throwable $e) {
|
||||
// Отказ почтового канала не должен валить успешный импорт.
|
||||
Log::warning('import.mail_failed', ['import_log_id' => $log->id, 'error' => $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Финальный callback после исчерпания ретраев ($tries=1).
|
||||
*/
|
||||
public function failed(Throwable $e): void
|
||||
{
|
||||
$this->updateLog($this->importLogId, [
|
||||
'status' => 'failed',
|
||||
'error_message' => $e->getMessage(),
|
||||
'finished_at' => now(),
|
||||
]);
|
||||
|
||||
Log::error('import.job_failed_permanently', [
|
||||
'import_log_id' => $this->importLogId,
|
||||
'exception' => $e->getMessage(),
|
||||
]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Mail;
|
||||
|
||||
use App\Models\ImportLog;
|
||||
use Illuminate\Bus\Queueable;
|
||||
use Illuminate\Mail\Mailable;
|
||||
use Illuminate\Mail\Mailables\Content;
|
||||
use Illuminate\Mail\Mailables\Envelope;
|
||||
use Illuminate\Queue\SerializesModels;
|
||||
|
||||
/**
|
||||
* Уведомление о завершении CSV-импорта исторических лидов (ТЗ §6.6).
|
||||
*/
|
||||
class ImportCompletedNotification extends Mailable
|
||||
{
|
||||
use Queueable;
|
||||
use SerializesModels;
|
||||
|
||||
/**
|
||||
* @param string $outcome 'done' | 'failed'
|
||||
*/
|
||||
public function __construct(
|
||||
public ImportLog $log,
|
||||
public string $outcome,
|
||||
) {}
|
||||
|
||||
public function envelope(): Envelope
|
||||
{
|
||||
$subject = $this->outcome === 'done'
|
||||
? 'Импорт данных завершён — Лидерра'
|
||||
: 'Импорт данных не удался — Лидерра';
|
||||
|
||||
return new Envelope(subject: $subject);
|
||||
}
|
||||
|
||||
public function content(): Content
|
||||
{
|
||||
return new Content(
|
||||
markdown: 'mail.import-completed',
|
||||
with: [
|
||||
'log' => $this->log,
|
||||
'outcome' => $this->outcome,
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Database\Factories\ImportLogFactory;
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||
|
||||
/**
|
||||
* Журнал CSV-импорта (schema §6.7, Sprint 4).
|
||||
*
|
||||
* Tenant-aware модель с RLS: tenant_isolation по current_setting('app.current_tenant_id').
|
||||
* Sprint 4 enrichment: entity_type / source_system / mapping_config / unknown_statuses_count / dry_run.
|
||||
*
|
||||
* @mixin IdeHelperImportLog
|
||||
*/
|
||||
class ImportLog extends Model
|
||||
{
|
||||
/** @use HasFactory<ImportLogFactory> */
|
||||
use HasFactory;
|
||||
|
||||
public const UPDATED_AT = null;
|
||||
|
||||
public const CREATED_AT = null;
|
||||
|
||||
protected $table = 'import_log';
|
||||
|
||||
/** Зеркало DB DEFAULT'ов: Laravel не читает их из БД после INSERT без refresh(). */
|
||||
protected $attributes = [
|
||||
'status' => 'pending',
|
||||
'entity_type' => 'leads',
|
||||
'source_system' => 'crm.bp-gr.ru',
|
||||
'dry_run' => false,
|
||||
'unknown_statuses_count' => 0,
|
||||
'rows_total' => 0,
|
||||
'rows_added' => 0,
|
||||
'rows_updated' => 0,
|
||||
'rows_skipped' => 0,
|
||||
];
|
||||
|
||||
protected $fillable = [
|
||||
'tenant_id',
|
||||
'user_id',
|
||||
'filename',
|
||||
'file_path',
|
||||
'rows_total',
|
||||
'rows_added',
|
||||
'rows_updated',
|
||||
'rows_skipped',
|
||||
'status',
|
||||
'error_message',
|
||||
'started_at',
|
||||
'finished_at',
|
||||
'entity_type',
|
||||
'source_system',
|
||||
'mapping_config',
|
||||
'unknown_statuses_count',
|
||||
'dry_run',
|
||||
];
|
||||
|
||||
protected function casts(): array
|
||||
{
|
||||
return [
|
||||
'tenant_id' => 'integer',
|
||||
'user_id' => 'integer',
|
||||
'rows_total' => 'integer',
|
||||
'rows_added' => 'integer',
|
||||
'rows_updated' => 'integer',
|
||||
'rows_skipped' => 'integer',
|
||||
'unknown_statuses_count' => 'integer',
|
||||
'dry_run' => 'boolean',
|
||||
'mapping_config' => 'array',
|
||||
'started_at' => 'datetime',
|
||||
'finished_at' => 'datetime',
|
||||
];
|
||||
}
|
||||
|
||||
/** @return BelongsTo<Tenant, $this> */
|
||||
public function tenant(): BelongsTo
|
||||
{
|
||||
return $this->belongsTo(Tenant::class);
|
||||
}
|
||||
|
||||
/** @return BelongsTo<User, $this> */
|
||||
public function user(): BelongsTo
|
||||
{
|
||||
return $this->belongsTo(User::class);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Database\Factories\ImportUnknownStatusFactory;
|
||||
use Illuminate\Database\Eloquent\Builder;
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||
|
||||
/**
|
||||
* Неизвестный статус воронки из CSV-импорта (schema §6.4, Sprint 4 H1).
|
||||
*
|
||||
* Tenant-aware модель с RLS. UNIQUE (tenant_id, status_ru): повторный импорт
|
||||
* инкрементит occurrences и переиспользует ранее проставленный mapped_to_slug.
|
||||
*
|
||||
* @mixin IdeHelperImportUnknownStatus
|
||||
*/
|
||||
class ImportUnknownStatus extends Model
|
||||
{
|
||||
/** @use HasFactory<ImportUnknownStatusFactory> */
|
||||
use HasFactory;
|
||||
|
||||
protected $fillable = [
|
||||
'tenant_id',
|
||||
'import_log_id',
|
||||
'status_ru',
|
||||
'occurrences',
|
||||
'mapped_to_slug',
|
||||
'resolved_at',
|
||||
'resolved_by',
|
||||
];
|
||||
|
||||
protected function casts(): array
|
||||
{
|
||||
return [
|
||||
'tenant_id' => 'integer',
|
||||
'import_log_id' => 'integer',
|
||||
'occurrences' => 'integer',
|
||||
'resolved_by' => 'integer',
|
||||
'resolved_at' => 'datetime',
|
||||
'created_at' => 'datetime',
|
||||
'updated_at' => 'datetime',
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Незамапленные статусы (mapped_to_slug IS NULL) — вход для wizard'а §6.6.
|
||||
*
|
||||
* @param Builder<ImportUnknownStatus> $query
|
||||
* @return Builder<ImportUnknownStatus>
|
||||
*/
|
||||
public function scopeUnresolved(Builder $query): Builder
|
||||
{
|
||||
return $query->whereNull('mapped_to_slug');
|
||||
}
|
||||
|
||||
/** @return BelongsTo<Tenant, $this> */
|
||||
public function tenant(): BelongsTo
|
||||
{
|
||||
return $this->belongsTo(Tenant::class);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Services\Import;
|
||||
|
||||
use Carbon\CarbonImmutable;
|
||||
use Throwable;
|
||||
|
||||
/**
|
||||
* Парсер CSV-выгрузки лидов из crm.bp-gr.ru (ТЗ §6.2/§6.3).
|
||||
*
|
||||
* Формат: UTF-8 с BOM, разделитель — запятая, дата `Y/m/d H:i:s`,
|
||||
* телефон `7XXXXXXXXXX`. Заголовок:
|
||||
* id,Проект,Тег проекта,Телефон,Создано,Напоминание,Комментарий,Состояние,Имя
|
||||
*
|
||||
* Невалидные строки не роняют парсинг — собираются в errors[].
|
||||
* Файл целиком загружается в память (MVP: ожидаемый объём — единицы тысяч строк).
|
||||
*/
|
||||
final class CsvLeadsParser
|
||||
{
|
||||
private const EXPECTED_COLUMNS = 9;
|
||||
|
||||
private const DATE_FORMAT = 'Y/m/d H:i:s';
|
||||
|
||||
public function parse(string $content): CsvParseResult
|
||||
{
|
||||
// Срезаем UTF-8 BOM.
|
||||
if (str_starts_with($content, "\xEF\xBB\xBF")) {
|
||||
$content = substr($content, 3);
|
||||
}
|
||||
|
||||
$lines = preg_split('/\r\n|\r|\n/', trim($content)) ?: [];
|
||||
$rows = [];
|
||||
$errors = [];
|
||||
|
||||
// Строка 1 — заголовок, пропускаем. dataLine — абсолютный номер строки файла (заголовок = 1).
|
||||
foreach (array_slice($lines, 1) as $index => $rawLine) {
|
||||
$dataLine = $index + 2; // +2: пропущен заголовок (index 0 → строка 2)
|
||||
|
||||
if (trim($rawLine) === '') {
|
||||
continue;
|
||||
}
|
||||
|
||||
$cells = str_getcsv($rawLine);
|
||||
|
||||
if (count($cells) < self::EXPECTED_COLUMNS) {
|
||||
$errors[] = ['line' => $dataLine, 'message' => 'Ожидалось '.self::EXPECTED_COLUMNS.' колонок, получено '.count($cells)];
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
$parsed = $this->parseRow($cells, $dataLine, $errors);
|
||||
if ($parsed !== null) {
|
||||
$rows[] = $parsed;
|
||||
}
|
||||
}
|
||||
|
||||
return new CsvParseResult($rows, $errors);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array<int, string> $cells
|
||||
* @param array<int, array{line: int, message: string}> $errors
|
||||
*/
|
||||
private function parseRow(array $cells, int $dataLine, array &$errors): ?ParsedLeadRow
|
||||
{
|
||||
[$id, $project, $tag, $phone, $createdAt, $reminder, $comment, $status, $name] = $cells;
|
||||
|
||||
$phone = trim($phone);
|
||||
if (preg_match('/^7\d{10}$/', $phone) !== 1) {
|
||||
$errors[] = ['line' => $dataLine, 'message' => "Невалидный телефон: '{$phone}'"];
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
$receivedAt = $this->parseDate($createdAt);
|
||||
if ($receivedAt === null) {
|
||||
$errors[] = ['line' => $dataLine, 'message' => "Невалидная дата 'Создано': '{$createdAt}'"];
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
$reminderAt = trim($reminder) === '' ? null : $this->parseDate($reminder);
|
||||
if (trim($reminder) !== '' && $reminderAt === null) {
|
||||
$errors[] = ['line' => $dataLine, 'message' => "Невалидная дата 'Напоминание': '{$reminder}'"];
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
$status = trim($status);
|
||||
if ($status === '') {
|
||||
$errors[] = ['line' => $dataLine, 'message' => 'Пустое поле «Состояние»'];
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Префикс B[123]_ из названия проекта срезается (паритет с ProcessWebhookJob).
|
||||
$projectName = (string) preg_replace('/^B[123]_/', '', trim($project));
|
||||
if ($projectName === '') {
|
||||
$errors[] = ['line' => $dataLine, 'message' => 'Пустое название проекта'];
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
return new ParsedLeadRow(
|
||||
sourceCrmId: (int) trim($id),
|
||||
projectName: $projectName,
|
||||
projectTag: trim($tag) === '' ? null : trim($tag),
|
||||
phone: $phone,
|
||||
receivedAt: $receivedAt,
|
||||
reminderAt: $reminderAt,
|
||||
comment: trim($comment) === '' ? null : trim($comment),
|
||||
statusRu: $status,
|
||||
contactName: trim($name) === '' ? null : trim($name),
|
||||
);
|
||||
}
|
||||
|
||||
private function parseDate(string $value): ?CarbonImmutable
|
||||
{
|
||||
try {
|
||||
$date = CarbonImmutable::createFromFormat(self::DATE_FORMAT, trim($value));
|
||||
} catch (Throwable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// createFromFormat возвращает false при несовпадении формата.
|
||||
return $date instanceof CarbonImmutable ? $date : null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Services\Import;
|
||||
|
||||
/**
|
||||
* Результат парсинга CSV: валидные строки + ошибки по номеру строки.
|
||||
*/
|
||||
final readonly class CsvParseResult
|
||||
{
|
||||
/**
|
||||
* @param array<int, ParsedLeadRow> $rows
|
||||
* @param array<int, array{line: int, message: string}> $errors
|
||||
*/
|
||||
public function __construct(
|
||||
public array $rows,
|
||||
public array $errors,
|
||||
) {}
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Services\Import;
|
||||
|
||||
use App\Models\Deal;
|
||||
use App\Models\ImportLog;
|
||||
use App\Models\ImportUnknownStatus;
|
||||
use App\Models\Project;
|
||||
use App\Models\Reminder;
|
||||
use App\Services\MonthlyPartitionManager;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
use Throwable;
|
||||
|
||||
/**
|
||||
* Оркестрация исторической миграции лидов из CSV crm.bp-gr.ru (ТЗ §6).
|
||||
*
|
||||
* Идемпотентность — через webhook_dedup_keys (та же advisory-lock логика, что
|
||||
* ProcessWebhookJob). Баланс НЕ списывается: исторические данные не являются
|
||||
* новыми лидами (ТЗ §6.5) — фиксируется одна транзакция типа historical_import.
|
||||
*/
|
||||
final class HistoricalImportService
|
||||
{
|
||||
public function __construct(
|
||||
private readonly MonthlyPartitionManager $partitions,
|
||||
private readonly StatusRuToSlugMapper $statusMapper,
|
||||
) {}
|
||||
|
||||
/**
|
||||
* @param array<int, ParsedLeadRow> $rows
|
||||
*/
|
||||
public function import(int $tenantId, int $userId, ImportLog $log, array $rows): ImportResult
|
||||
{
|
||||
$dryRun = $log->dry_run;
|
||||
|
||||
if ($rows === []) {
|
||||
return new ImportResult(0, 0, 0, [], []);
|
||||
}
|
||||
|
||||
// Партиции deals под исторический диапазон дат CSV (один раз заранее).
|
||||
if (! $dryRun) {
|
||||
$dates = array_map(fn (ParsedLeadRow $r) => $r->receivedAt, $rows);
|
||||
$this->partitions->ensureRange(
|
||||
'deals',
|
||||
min($dates),
|
||||
max($dates),
|
||||
);
|
||||
}
|
||||
|
||||
// Tenant-резолвленные переопределения неизвестных статусов.
|
||||
$overrides = $this->loadStatusOverrides($tenantId);
|
||||
|
||||
$added = 0;
|
||||
$updated = 0;
|
||||
$skipped = 0;
|
||||
$unknown = [];
|
||||
$errors = [];
|
||||
|
||||
foreach ($rows as $row) {
|
||||
$slug = $this->resolveStatus($row->statusRu, $overrides, $unknown);
|
||||
|
||||
if ($dryRun) {
|
||||
$added++; // проекция: для dry-run не различаем add/update
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
$wasCreated = $this->upsertRow($tenantId, $userId, $row, $slug);
|
||||
$wasCreated ? $added++ : $updated++;
|
||||
} catch (Throwable $e) {
|
||||
$skipped++;
|
||||
$errors[] = ['source_crm_id' => $row->sourceCrmId, 'message' => $e->getMessage()];
|
||||
Log::warning('import.row_failed', ['source_crm_id' => $row->sourceCrmId, 'error' => $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
|
||||
if (! $dryRun) {
|
||||
$this->persistUnknownStatuses($tenantId, $log->id, $unknown);
|
||||
$this->recordHistoricalTransaction($tenantId, $added + $updated);
|
||||
}
|
||||
|
||||
return new ImportResult($added, $updated, $skipped, $unknown, $errors);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array<string, string> status_ru => slug (только resolved)
|
||||
*/
|
||||
private function loadStatusOverrides(int $tenantId): array
|
||||
{
|
||||
return DB::transaction(function () use ($tenantId): array {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
// Явный where(tenant_id) — defense-in-depth: queue worker на prod
|
||||
// (crm_supplier_worker) — BYPASSRLS, SET LOCAL не фильтрует
|
||||
// (00_create_roles.sql §5). Без фильтра — cross-tenant утечка маппинга.
|
||||
return ImportUnknownStatus::query()
|
||||
->where('tenant_id', $tenantId)
|
||||
->whereNotNull('mapped_to_slug')
|
||||
->pluck('mapped_to_slug', 'status_ru')
|
||||
->all();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Маппит статус: каноническая таблица §6.4 → tenant-override → fallback 'new'.
|
||||
* Неизвестный статус инкрементит счётчик в $unknown по ссылке.
|
||||
*
|
||||
* @param array<string, string> $overrides
|
||||
* @param array<string, int> $unknown
|
||||
*/
|
||||
private function resolveStatus(string $statusRu, array $overrides, array &$unknown): string
|
||||
{
|
||||
$slug = $this->statusMapper->toSlug($statusRu);
|
||||
if ($slug !== null) {
|
||||
return $slug;
|
||||
}
|
||||
|
||||
$key = trim($statusRu);
|
||||
if (isset($overrides[$key])) {
|
||||
return $overrides[$key];
|
||||
}
|
||||
|
||||
$unknown[$key] = ($unknown[$key] ?? 0) + 1;
|
||||
|
||||
return 'new';
|
||||
}
|
||||
|
||||
/**
|
||||
* Идемпотентный upsert одной строки в собственной транзакции.
|
||||
* Возвращает true — создана новая сделка, false — обновлена существующая.
|
||||
*/
|
||||
private function upsertRow(int $tenantId, int $userId, ParsedLeadRow $row, string $slug): bool
|
||||
{
|
||||
return DB::transaction(function () use ($tenantId, $userId, $row, $slug): bool {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
$project = Project::firstOrCreate(
|
||||
['tenant_id' => $tenantId, 'name' => $row->projectName],
|
||||
['tag' => $row->projectTag, 'type' => 'import'],
|
||||
);
|
||||
|
||||
// advisory lock (tenant_id, source_crm_id) — сериализует upsert (§6.5).
|
||||
$lockKey = (($tenantId & 0xFFFFFFFF) << 32) | ($row->sourceCrmId & 0xFFFFFFFF);
|
||||
DB::statement('SELECT pg_advisory_xact_lock(?)', [$lockKey]);
|
||||
|
||||
$existing = DB::selectOne(
|
||||
'SELECT deal_id, deal_received_at FROM webhook_dedup_keys WHERE tenant_id = ? AND source_crm_id = ?',
|
||||
[$tenantId, $row->sourceCrmId],
|
||||
);
|
||||
|
||||
if ($existing !== null) {
|
||||
$deal = Deal::query()
|
||||
->where('id', $existing->deal_id)
|
||||
->where('received_at', $existing->deal_received_at)
|
||||
->firstOrFail();
|
||||
// §6.5 стадия 3a: для исторической миграции status перезаписывается.
|
||||
$deal->update([
|
||||
'status' => $slug,
|
||||
'contact_name' => $row->contactName,
|
||||
'comment' => $row->comment,
|
||||
]);
|
||||
$this->syncReminder($tenantId, $userId, $deal, $row);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$deal = Deal::create([
|
||||
'tenant_id' => $tenantId,
|
||||
'source_crm_id' => $row->sourceCrmId,
|
||||
'project_id' => $project->id,
|
||||
'phone' => $row->phone,
|
||||
'status' => $slug,
|
||||
'contact_name' => $row->contactName,
|
||||
'comment' => $row->comment,
|
||||
'received_at' => $row->receivedAt,
|
||||
]);
|
||||
|
||||
DB::table('webhook_dedup_keys')->insert([
|
||||
'tenant_id' => $tenantId,
|
||||
'source_crm_id' => $row->sourceCrmId,
|
||||
'deal_id' => $deal->id,
|
||||
'deal_received_at' => $deal->received_at,
|
||||
'created_at' => now(),
|
||||
]);
|
||||
|
||||
$this->syncReminder($tenantId, $userId, $deal, $row);
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Создаёт reminders-строку для непустого «Напоминание» (ТЗ §6.3 — поле
|
||||
* deals.reminder_at удалено в v8.3, заменено таблицей reminders).
|
||||
* Идемпотентно: не дублирует напоминание при повторном импорте.
|
||||
*/
|
||||
private function syncReminder(int $tenantId, int $userId, Deal $deal, ParsedLeadRow $row): void
|
||||
{
|
||||
if ($row->reminderAt === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
$exists = Reminder::query()
|
||||
->where('deal_id', $deal->id)
|
||||
->where('remind_at', $row->reminderAt)
|
||||
->exists();
|
||||
|
||||
if ($exists) {
|
||||
return;
|
||||
}
|
||||
|
||||
Reminder::create([
|
||||
'tenant_id' => $tenantId,
|
||||
'deal_id' => $deal->id,
|
||||
'text' => 'Импортировано из crm.bp-gr.ru',
|
||||
'remind_at' => $row->reminderAt,
|
||||
'created_by' => $userId,
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* upsert import_unknown_statuses: инкремент occurrences, маппинг не трогаем.
|
||||
*
|
||||
* @param array<string, int> $unknown
|
||||
*/
|
||||
private function persistUnknownStatuses(int $tenantId, int $importLogId, array $unknown): void
|
||||
{
|
||||
if ($unknown === []) {
|
||||
return;
|
||||
}
|
||||
|
||||
DB::transaction(function () use ($tenantId, $importLogId, $unknown): void {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
foreach ($unknown as $statusRu => $count) {
|
||||
// Явный where(tenant_id) — defense-in-depth под BYPASSRLS queue worker
|
||||
// (00_create_roles.sql §5): иначе increment мог бы попасть в строку
|
||||
// чужого тенанта с тем же status_ru.
|
||||
$existing = ImportUnknownStatus::query()
|
||||
->where('tenant_id', $tenantId)
|
||||
->where('status_ru', $statusRu)
|
||||
->first();
|
||||
|
||||
if ($existing !== null) {
|
||||
$existing->increment('occurrences', $count);
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
ImportUnknownStatus::create([
|
||||
'tenant_id' => $tenantId,
|
||||
'import_log_id' => $importLogId,
|
||||
'status_ru' => $statusRu,
|
||||
'occurrences' => $count,
|
||||
]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Одна информационная транзакция historical_import (баланс не меняется, ТЗ §6.5).
|
||||
*/
|
||||
private function recordHistoricalTransaction(int $tenantId, int $count): void
|
||||
{
|
||||
if ($count === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
DB::transaction(function () use ($tenantId, $count): void {
|
||||
DB::statement('SET LOCAL app.current_tenant_id = '.$tenantId);
|
||||
|
||||
DB::table('balance_transactions')->insert([
|
||||
'tenant_id' => $tenantId,
|
||||
'type' => 'historical_import',
|
||||
'amount_rub' => 0,
|
||||
'amount_leads' => 0,
|
||||
'description' => "Импортировано {$count} исторических сделок (баланс не списан)",
|
||||
'created_at' => now(),
|
||||
]);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Services\Import;
|
||||
|
||||
/**
|
||||
* Итог импорта одного файла.
|
||||
*/
|
||||
final readonly class ImportResult
|
||||
{
|
||||
/**
|
||||
* @param array<string, int> $unknownStatuses статус_ru => количество вхождений
|
||||
* @param array<int, array{source_crm_id: int, message: string}> $errors ошибки upsert'а по строке (идентификатор — source_crm_id)
|
||||
*/
|
||||
public function __construct(
|
||||
public int $added,
|
||||
public int $updated,
|
||||
public int $skipped,
|
||||
public array $unknownStatuses,
|
||||
public array $errors,
|
||||
) {}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Services\Import;
|
||||
|
||||
use Carbon\CarbonImmutable;
|
||||
|
||||
/**
|
||||
* Одна валидная строка CSV-импорта лидов (ТЗ §6.3).
|
||||
*/
|
||||
final readonly class ParsedLeadRow
|
||||
{
|
||||
public function __construct(
|
||||
public int $sourceCrmId,
|
||||
public string $projectName,
|
||||
public ?string $projectTag,
|
||||
public string $phone,
|
||||
public CarbonImmutable $receivedAt,
|
||||
public ?CarbonImmutable $reminderAt,
|
||||
public ?string $comment,
|
||||
public string $statusRu,
|
||||
public ?string $contactName,
|
||||
) {}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Services\Import;
|
||||
|
||||
/**
|
||||
* Маппинг русских названий статусов воронки в slug (ТЗ §6.4).
|
||||
*
|
||||
* Чистый сервис без зависимостей. Tenant-специфичные переопределения
|
||||
* неизвестных статусов накладываются вызывающим кодом (HistoricalImportService).
|
||||
*/
|
||||
class StatusRuToSlugMapper
|
||||
{
|
||||
/** @var array<string, string> Канонический маппинг ТЗ §6.4 (14 статусов воронки). */
|
||||
private const STATUS_RU_TO_SLUG = [
|
||||
'Новые' => 'new',
|
||||
'Просмотрено' => 'viewed',
|
||||
'Проработан' => 'worked',
|
||||
'База' => 'base',
|
||||
'Недозвон' => 'missed',
|
||||
'Переговоры' => 'negotiations',
|
||||
'Ожидаем оплаты' => 'waiting_payment',
|
||||
'Партнерка' => 'partnership',
|
||||
'Оплачено' => 'paid',
|
||||
'Закрыто и не реализовано' => 'closed',
|
||||
'Тест драйв' => 'test_drive',
|
||||
'Горячий' => 'hot',
|
||||
'На замену' => 'replacement',
|
||||
'Конечный недозвон' => 'final_missed',
|
||||
];
|
||||
|
||||
/**
|
||||
* Возвращает slug или null, если статус не входит в каноническую таблицу.
|
||||
*/
|
||||
public function toSlug(string $statusRu): ?string
|
||||
{
|
||||
return self::STATUS_RU_TO_SLUG[trim($statusRu)] ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Полная каноническая таблица — для UI wizard'а (показать варианты).
|
||||
*
|
||||
* @return array<string, string>
|
||||
*/
|
||||
public function map(): array
|
||||
{
|
||||
return self::STATUS_RU_TO_SLUG;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Services;
|
||||
|
||||
use Carbon\CarbonInterface;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use InvalidArgumentException;
|
||||
|
||||
/**
|
||||
* Создаёт месячные RANGE-партиции для таблиц, партиционированных по received_at.
|
||||
*
|
||||
* Native-замена pg_partman (расширение недоступно на Windows-стеке без сборки
|
||||
* из исходников). Идемпотентна: партиция, которая уже есть, пропускается.
|
||||
*
|
||||
* Используется:
|
||||
* - cron `partitions:create-months` — N месяцев вперёд;
|
||||
* - HistoricalImportService — под исторический диапазон дат CSV.
|
||||
*/
|
||||
class MonthlyPartitionManager
|
||||
{
|
||||
/** @var array<int, string> Таблицы, партиционированные по received_at помесячно. */
|
||||
public const PARTITIONED_TABLES = ['deals', 'supplier_lead_costs'];
|
||||
|
||||
/**
|
||||
* Гарантирует наличие месячных партиций таблицы для всех месяцев,
|
||||
* пересекающих [$from, $to] включительно.
|
||||
*
|
||||
* @return int Сколько партиций реально создано (0 — все уже были).
|
||||
*/
|
||||
public function ensureRange(string $table, CarbonInterface $from, CarbonInterface $to): int
|
||||
{
|
||||
if (! in_array($table, self::PARTITIONED_TABLES, true)) {
|
||||
throw new InvalidArgumentException("Таблица '{$table}' не партиционирована помесячно");
|
||||
}
|
||||
|
||||
$month = $from->copy()->startOfMonth();
|
||||
$last = $to->copy()->startOfMonth();
|
||||
$created = 0;
|
||||
|
||||
while ($month->lessThanOrEqualTo($last)) {
|
||||
$created += $this->ensureMonth($table, $month) ? 1 : 0;
|
||||
$month = $month->addMonth();
|
||||
}
|
||||
|
||||
return $created;
|
||||
}
|
||||
|
||||
/**
|
||||
* Создаёт одну месячную партицию. Возвращает true, если партиция создана,
|
||||
* false — если уже существовала.
|
||||
*/
|
||||
public function ensureMonth(string $table, CarbonInterface $monthStart): bool
|
||||
{
|
||||
if (! in_array($table, self::PARTITIONED_TABLES, true)) {
|
||||
throw new InvalidArgumentException("Таблица '{$table}' не партиционирована помесячно");
|
||||
}
|
||||
|
||||
$start = $monthStart->copy()->startOfMonth();
|
||||
$end = $start->copy()->addMonth();
|
||||
$partition = sprintf('%s_%s', $table, $start->format('Y_m'));
|
||||
|
||||
$exists = DB::selectOne(
|
||||
"SELECT 1 AS ok FROM pg_class WHERE relname = ? AND relkind = 'r'",
|
||||
[$partition],
|
||||
);
|
||||
|
||||
if ($exists !== null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
DB::statement(sprintf(
|
||||
"CREATE TABLE %s PARTITION OF %s FOR VALUES FROM ('%s') TO ('%s')",
|
||||
$partition,
|
||||
$table,
|
||||
$start->format('Y-m-d'),
|
||||
$end->format('Y-m-d'),
|
||||
));
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Http\Middleware\EnsureSaasAdmin;
|
||||
use App\Http\Middleware\SetTenantContext;
|
||||
use Illuminate\Foundation\Application;
|
||||
use Illuminate\Foundation\Configuration\Exceptions;
|
||||
@@ -18,6 +19,7 @@ return Application::configure(basePath: dirname(__DIR__))
|
||||
|
||||
$middleware->alias([
|
||||
'tenant' => SetTenantContext::class,
|
||||
'saas-admin' => EnsureSaasAdmin::class,
|
||||
]);
|
||||
|
||||
// Webhook receive endpoint (POST /api/webhook/{token}) не должен требовать
|
||||
|
||||
@@ -65,6 +65,7 @@
|
||||
"stan": "@php vendor/bin/phpstan analyse --memory-limit=512M",
|
||||
"mutation": "@php vendor/bin/infection --threads=2 --min-msi=50",
|
||||
"audit-offline": "@composer audit --locked",
|
||||
"demo:seed": "@php artisan db:seed --class=DemoSeeder --force",
|
||||
"ide-helper": [
|
||||
"@php artisan ide-helper:generate",
|
||||
"@php artisan ide-helper:meta"
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Database\Factories;
|
||||
|
||||
use App\Models\ImportLog;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use Illuminate\Database\Eloquent\Factories\Factory;
|
||||
|
||||
/** @extends Factory<ImportLog> */
|
||||
class ImportLogFactory extends Factory
|
||||
{
|
||||
protected $model = ImportLog::class;
|
||||
|
||||
public function definition(): array
|
||||
{
|
||||
return [
|
||||
'tenant_id' => Tenant::factory(),
|
||||
'user_id' => User::factory(),
|
||||
'filename' => 'leads-export.csv',
|
||||
'file_path' => 'imports/1/'.$this->faker->uuid().'.csv',
|
||||
'status' => 'pending',
|
||||
'entity_type' => 'leads',
|
||||
'source_system' => 'crm.bp-gr.ru',
|
||||
'dry_run' => false,
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Database\Factories;
|
||||
|
||||
use App\Models\ImportUnknownStatus;
|
||||
use App\Models\Tenant;
|
||||
use Illuminate\Database\Eloquent\Factories\Factory;
|
||||
|
||||
/** @extends Factory<ImportUnknownStatus> */
|
||||
class ImportUnknownStatusFactory extends Factory
|
||||
{
|
||||
protected $model = ImportUnknownStatus::class;
|
||||
|
||||
public function definition(): array
|
||||
{
|
||||
return [
|
||||
'tenant_id' => Tenant::factory(),
|
||||
'status_ru' => $this->faker->unique()->word(),
|
||||
'occurrences' => $this->faker->numberBetween(1, 20),
|
||||
'mapped_to_slug' => null,
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
/**
|
||||
* Sprint 4 (H1+H2) — историческая миграция лидов §6.
|
||||
*
|
||||
* H1: новая таблица import_unknown_statuses (tenant-level resolved mappings).
|
||||
* H2: enrichment import_log — +5 колонок.
|
||||
*
|
||||
* Guard'ы: migrate:fresh грузит schema.sql v8.21+ (где delta уже есть) до миграций,
|
||||
* поэтому каждый кусок применяется только при отсутствии.
|
||||
*/
|
||||
return new class extends Migration
|
||||
{
|
||||
public function up(): void
|
||||
{
|
||||
foreach ([
|
||||
'entity_type' => "ALTER TABLE import_log ADD COLUMN entity_type VARCHAR(20) NOT NULL DEFAULT 'leads' CHECK (entity_type IN ('leads','projects'))",
|
||||
'source_system' => "ALTER TABLE import_log ADD COLUMN source_system VARCHAR(50) NOT NULL DEFAULT 'crm.bp-gr.ru'",
|
||||
'mapping_config' => 'ALTER TABLE import_log ADD COLUMN mapping_config JSONB',
|
||||
'unknown_statuses_count' => 'ALTER TABLE import_log ADD COLUMN unknown_statuses_count INT NOT NULL DEFAULT 0',
|
||||
'dry_run' => 'ALTER TABLE import_log ADD COLUMN dry_run BOOLEAN NOT NULL DEFAULT FALSE',
|
||||
] as $column => $ddl) {
|
||||
if (! Schema::hasColumn('import_log', $column)) {
|
||||
DB::statement($ddl);
|
||||
}
|
||||
}
|
||||
|
||||
if (! Schema::hasTable('import_unknown_statuses')) {
|
||||
DB::statement(<<<'SQL'
|
||||
CREATE TABLE import_unknown_statuses (
|
||||
id BIGSERIAL PRIMARY KEY,
|
||||
tenant_id BIGINT NOT NULL REFERENCES tenants(id) ON DELETE CASCADE,
|
||||
import_log_id BIGINT REFERENCES import_log(id) ON DELETE SET NULL,
|
||||
status_ru VARCHAR(100) NOT NULL,
|
||||
occurrences INT NOT NULL DEFAULT 0,
|
||||
mapped_to_slug VARCHAR(50) REFERENCES lead_statuses(slug),
|
||||
resolved_at TIMESTAMPTZ,
|
||||
resolved_by BIGINT REFERENCES users(id),
|
||||
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ,
|
||||
UNIQUE (tenant_id, status_ru)
|
||||
)
|
||||
SQL);
|
||||
|
||||
DB::statement(
|
||||
'CREATE INDEX idx_import_unknown_statuses_unresolved
|
||||
ON import_unknown_statuses (tenant_id) WHERE mapped_to_slug IS NULL'
|
||||
);
|
||||
|
||||
DB::statement('ALTER TABLE import_unknown_statuses ENABLE ROW LEVEL SECURITY');
|
||||
DB::statement(
|
||||
"CREATE POLICY tenant_isolation ON import_unknown_statuses
|
||||
USING (tenant_id = current_setting('app.current_tenant_id')::bigint)"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
// down() не симметричен: на проекте rollback применяется только после
|
||||
// migrate:fresh (см. add_archived_at_to_projects). Для отката v8.21 —
|
||||
// отдельный schema-bump, не эта миграция.
|
||||
DB::statement('DROP TABLE IF EXISTS import_unknown_statuses');
|
||||
|
||||
foreach (['entity_type', 'source_system', 'mapping_config', 'unknown_statuses_count', 'dry_run'] as $column) {
|
||||
if (Schema::hasColumn('import_log', $column)) {
|
||||
Schema::table('import_log', fn ($table) => $table->dropColumn($column));
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -14,6 +14,16 @@ class DemoSeeder extends Seeder
|
||||
{
|
||||
public function run(): void
|
||||
{
|
||||
// DemoSeeder создаёт демо-данные и НЕ должен исполняться в production.
|
||||
// DatabaseSeeder вызывает его только в local/testing — этот guard
|
||||
// дополнительно защищает прямой вызов `db:seed --class=DemoSeeder`
|
||||
// (в т.ч. через `composer demo:seed`).
|
||||
if (app()->isProduction()) {
|
||||
$this->command->warn('DemoSeeder пропущен: запрещён в production.');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$tenant = Tenant::query()->where('subdomain', 'demo')->first()
|
||||
?? Tenant::factory()->create([
|
||||
'subdomain' => 'demo',
|
||||
|
||||
+198
-12
@@ -693,7 +693,19 @@ parameters:
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 37
|
||||
count: 15
|
||||
path: tests/Feature/DealCreateTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealCreateTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealCreateTest.php
|
||||
|
||||
-
|
||||
@@ -717,7 +729,19 @@ parameters:
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 20
|
||||
count: 11
|
||||
path: tests/Feature/DealDestroyTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealDestroyTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealDestroyTest.php
|
||||
|
||||
-
|
||||
@@ -759,13 +783,25 @@ parameters:
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 50
|
||||
count: 30
|
||||
path: tests/Feature/DealIndexTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealIndexTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealIndexTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:getJson\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 22
|
||||
count: 21
|
||||
path: tests/Feature/DealIndexTest.php
|
||||
|
||||
-
|
||||
@@ -783,7 +819,19 @@ parameters:
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 18
|
||||
count: 9
|
||||
path: tests/Feature/DealRestoreTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealRestoreTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealRestoreTest.php
|
||||
|
||||
-
|
||||
@@ -819,19 +867,31 @@ parameters:
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$project\.$#'
|
||||
identifier: property.notFound
|
||||
count: 7
|
||||
count: 6
|
||||
path: tests/Feature/DealShowTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 20
|
||||
count: 13
|
||||
path: tests/Feature/DealShowTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealShowTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealShowTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:getJson\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 8
|
||||
count: 7
|
||||
path: tests/Feature/DealShowTest.php
|
||||
|
||||
-
|
||||
@@ -849,7 +909,19 @@ parameters:
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 12
|
||||
count: 7
|
||||
path: tests/Feature/DealTransitionTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealTransitionTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealTransitionTest.php
|
||||
|
||||
-
|
||||
@@ -873,19 +945,31 @@ parameters:
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$project\.$#'
|
||||
identifier: property.notFound
|
||||
count: 10
|
||||
count: 9
|
||||
path: tests/Feature/DealUpdateTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 24
|
||||
count: 15
|
||||
path: tests/Feature/DealUpdateTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealUpdateTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 1
|
||||
path: tests/Feature/DealUpdateTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:patchJson\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 10
|
||||
count: 9
|
||||
path: tests/Feature/DealUpdateTest.php
|
||||
|
||||
-
|
||||
@@ -924,6 +1008,90 @@ parameters:
|
||||
count: 17
|
||||
path: tests/Feature/ImpersonationTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$service\.$#'
|
||||
identifier: property.notFound
|
||||
count: 10
|
||||
path: tests/Feature/Import/HistoricalImportServiceTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 23
|
||||
path: tests/Feature/Import/HistoricalImportServiceTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 20
|
||||
path: tests/Feature/Import/HistoricalImportServiceTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 3
|
||||
path: tests/Feature/Import/ImportCompletedNotificationTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 3
|
||||
path: tests/Feature/Import/ImportCompletedNotificationTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 12
|
||||
path: tests/Feature/Import/ImportControllerTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 3
|
||||
path: tests/Feature/Import/ImportControllerTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 1
|
||||
path: tests/Feature/Import/ImportControllerTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:getJson\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 4
|
||||
path: tests/Feature/Import/ImportControllerTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:postJson\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 5
|
||||
path: tests/Feature/Import/ImportControllerTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 9
|
||||
path: tests/Feature/Import/ImportLeadsJobTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 4
|
||||
path: tests/Feature/Import/ImportLeadsJobTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$tenant\.$#'
|
||||
identifier: property.notFound
|
||||
count: 4
|
||||
path: tests/Feature/Import/ImportModelsTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$user\.$#'
|
||||
identifier: property.notFound
|
||||
count: 2
|
||||
path: tests/Feature/Import/ImportModelsTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:postJson\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
@@ -954,6 +1122,12 @@ parameters:
|
||||
count: 16
|
||||
path: tests/Feature/LookupsTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:actingAs\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 3
|
||||
path: tests/Feature/LookupsTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:getJson\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
@@ -1242,6 +1416,18 @@ parameters:
|
||||
count: 5
|
||||
path: tests/Feature/RlsSmokeTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$app\.$#'
|
||||
identifier: property.notFound
|
||||
count: 1
|
||||
path: tests/Feature/SaasAdminMiddlewareTest.php
|
||||
|
||||
-
|
||||
message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:getJson\(\)\.$#'
|
||||
identifier: method.notFound
|
||||
count: 2
|
||||
path: tests/Feature/SaasAdminMiddlewareTest.php
|
||||
|
||||
-
|
||||
message: '#^Access to an undefined property Pest\\PendingCalls\\TestCall\:\:\$project\.$#'
|
||||
identifier: property.notFound
|
||||
|
||||
@@ -428,3 +428,69 @@ export async function notifyIncidentRkn(id: number): Promise<ApiAdminIncidentDet
|
||||
);
|
||||
return data.incident;
|
||||
}
|
||||
|
||||
// === SaaS-admin → Тарифная сетка (Plan 4 / Sprint 5C G3) ===
|
||||
|
||||
export interface AdminPricingTier {
|
||||
tier_no: number;
|
||||
leads_in_tier: number | null;
|
||||
price_per_lead_kopecks: number;
|
||||
effective_from: string;
|
||||
}
|
||||
|
||||
export interface PricingTiersResponse {
|
||||
active: AdminPricingTier[];
|
||||
scheduled: Record<string, AdminPricingTier[]>;
|
||||
}
|
||||
|
||||
export interface PricingTierEditorRow {
|
||||
tier_no: number;
|
||||
leads_in_tier: number | null;
|
||||
price_rub: string;
|
||||
}
|
||||
|
||||
export async function getPricingTiers(): Promise<PricingTiersResponse> {
|
||||
const { data } = await apiClient.get<{ data: PricingTiersResponse }>('/api/admin/pricing-tiers');
|
||||
return { active: data.data.active, scheduled: data.data.scheduled ?? {} };
|
||||
}
|
||||
|
||||
export async function createPricingTiers(
|
||||
tiers: PricingTierEditorRow[],
|
||||
effectiveFrom?: string,
|
||||
): Promise<{ effective_from: string }> {
|
||||
await ensureCsrfCookie();
|
||||
const payload: { tiers: PricingTierEditorRow[]; effective_from?: string } = { tiers };
|
||||
if (effectiveFrom) payload.effective_from = effectiveFrom;
|
||||
const { data } = await apiClient.post<{ effective_from: string }>('/api/admin/pricing-tiers', payload);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function deleteScheduledPricingTier(effectiveFrom: string): Promise<void> {
|
||||
await ensureCsrfCookie();
|
||||
await apiClient.delete(`/api/admin/pricing-tiers/scheduled/${effectiveFrom}`);
|
||||
}
|
||||
|
||||
// === SaaS-admin → Цены поставщиков (Plan 4 / Sprint 5C G3) ===
|
||||
|
||||
export interface AdminSupplier {
|
||||
id: number;
|
||||
code: string;
|
||||
name: string;
|
||||
cost_rub: string;
|
||||
quality_score: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export async function getAdminSuppliers(): Promise<AdminSupplier[]> {
|
||||
const { data } = await apiClient.get<{ data: AdminSupplier[] }>('/api/admin/suppliers');
|
||||
return data.data;
|
||||
}
|
||||
|
||||
export async function updateAdminSupplier(
|
||||
id: number,
|
||||
payload: { cost_rub: string; quality_score: string; is_active: boolean },
|
||||
): Promise<AdminSupplier> {
|
||||
await ensureCsrfCookie();
|
||||
const { data } = await apiClient.patch<{ data: AdminSupplier }>(`/api/admin/suppliers/${id}`, payload);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
@@ -233,3 +233,14 @@ export async function listProjects(tenantId: number): Promise<ApiProject[]> {
|
||||
});
|
||||
return data.projects;
|
||||
}
|
||||
|
||||
/**
|
||||
* Лёгкий count-only запрос для бейджа «Сделки» в AppSidebar (audit B2).
|
||||
* Backend пропускает SELECT строк — отдаёт только COUNT(*).
|
||||
*/
|
||||
export async function fetchDealsCount(tenantId: number): Promise<number> {
|
||||
const { data } = await apiClient.get<{ total: number }>('/api/deals', {
|
||||
params: { tenant_id: tenantId, count_only: 1 },
|
||||
});
|
||||
return data.total;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import { apiClient } from './client';
|
||||
|
||||
/**
|
||||
* API-клиент исторической миграции лидов (ТЗ §6).
|
||||
* Эндпоинты: POST/GET /api/imports, /api/imports/unknown-statuses, /api/imports/unknown-statuses/resolve.
|
||||
*/
|
||||
|
||||
export interface ImportLogResource {
|
||||
id: number;
|
||||
filename: string;
|
||||
status: 'pending' | 'processing' | 'done' | 'failed';
|
||||
rows_total: number;
|
||||
rows_added: number;
|
||||
rows_updated: number;
|
||||
rows_skipped: number;
|
||||
unknown_statuses_count: number;
|
||||
dry_run: boolean;
|
||||
error_message: string | null;
|
||||
started_at: string | null;
|
||||
finished_at: string | null;
|
||||
}
|
||||
|
||||
export interface UnknownStatus {
|
||||
id: number;
|
||||
status_ru: string;
|
||||
occurrences: number;
|
||||
}
|
||||
|
||||
export interface StatusMapping {
|
||||
status_ru: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
/** POST /api/imports — загрузить CSV. */
|
||||
export async function uploadImport(file: File, dryRun = false): Promise<ImportLogResource> {
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
if (dryRun) {
|
||||
form.append('dry_run', '1');
|
||||
}
|
||||
const { data } = await apiClient.post<{ data: ImportLogResource }>('/api/imports', form);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
/** GET /api/imports — история импортов. */
|
||||
export async function listImports(): Promise<ImportLogResource[]> {
|
||||
const { data } = await apiClient.get<{ data: ImportLogResource[] }>('/api/imports');
|
||||
return data.data;
|
||||
}
|
||||
|
||||
/** GET /api/imports/{id} — прогресс одного импорта. */
|
||||
export async function getImport(id: number): Promise<ImportLogResource> {
|
||||
const { data } = await apiClient.get<{ data: ImportLogResource }>(`/api/imports/${id}`);
|
||||
return data.data;
|
||||
}
|
||||
|
||||
/** GET /api/imports/unknown-statuses — незамапленные статусы. */
|
||||
export async function getUnknownStatuses(): Promise<UnknownStatus[]> {
|
||||
const { data } = await apiClient.get<{ data: UnknownStatus[] }>('/api/imports/unknown-statuses');
|
||||
return data.data;
|
||||
}
|
||||
|
||||
/** POST /api/imports/unknown-statuses/resolve — сохранить маппинг. */
|
||||
export async function resolveUnknownStatuses(mappings: StatusMapping[]): Promise<void> {
|
||||
await apiClient.post('/api/imports/unknown-statuses/resolve', { mappings });
|
||||
}
|
||||
@@ -46,7 +46,15 @@ const tariffPriceText = computed(() => {
|
||||
@click="$emit('topup')"
|
||||
>Пополнить</v-btn
|
||||
>
|
||||
<v-btn variant="outlined" prepend-icon="mdi-autorenew" size="small"> Автопополнение </v-btn>
|
||||
<v-tooltip text="Автопополнение будет доступно после подключения платёжного шлюза.">
|
||||
<template #activator="{ props: tipProps }">
|
||||
<span v-bind="tipProps" class="d-inline-flex">
|
||||
<v-btn variant="outlined" prepend-icon="mdi-autorenew" size="small" disabled>
|
||||
Автопополнение
|
||||
</v-btn>
|
||||
</span>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
@@ -78,7 +86,13 @@ const tariffPriceText = computed(() => {
|
||||
</ul>
|
||||
</template>
|
||||
<div v-else class="tariff-empty mt-2">Тариф не выбран</div>
|
||||
<v-btn variant="outlined" size="small" class="mt-auto">Сменить тариф →</v-btn>
|
||||
<v-tooltip text="Самостоятельная смена тарифа появится после запуска биллинга.">
|
||||
<template #activator="{ props: tipProps }">
|
||||
<span v-bind="tipProps" class="mt-auto d-inline-flex">
|
||||
<v-btn variant="outlined" size="small" disabled>Сменить тариф →</v-btn>
|
||||
</span>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -42,7 +42,8 @@ async function loadLookups(tenantId: number) {
|
||||
managerIdByName.value = map;
|
||||
}
|
||||
} catch {
|
||||
// Молчаливый fallback на mock — UI пользователь всё равно увидит.
|
||||
// Audit C6: фиксируем провал — UI покажет degradation-alert.
|
||||
lookupsFailed.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,6 +77,9 @@ const errors = ref<Record<string, string>>({});
|
||||
const submitError = ref<string | null>(null);
|
||||
const busy = ref(false);
|
||||
|
||||
// Audit C6: loadLookups упал → показываем degradation-alert (списки = mock).
|
||||
const lookupsFailed = ref(false);
|
||||
|
||||
// Регенерируем ID на каждое создание для local-mode. На API — backend SERIAL.
|
||||
function nextId(): number {
|
||||
return Math.floor(Date.now() / 1000) + Math.floor(Math.random() * 1000);
|
||||
@@ -91,6 +95,7 @@ function reset() {
|
||||
errors.value = {};
|
||||
submitError.value = null;
|
||||
busy.value = false;
|
||||
lookupsFailed.value = false;
|
||||
}
|
||||
|
||||
watch(
|
||||
@@ -170,6 +175,8 @@ async function submit() {
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ lookupsFailed });
|
||||
|
||||
function close() {
|
||||
dialogOpen.value = false;
|
||||
}
|
||||
@@ -190,6 +197,17 @@ function close() {
|
||||
>
|
||||
{{ submitError }}
|
||||
</v-alert>
|
||||
<v-alert
|
||||
v-if="lookupsFailed"
|
||||
type="warning"
|
||||
variant="tonal"
|
||||
density="compact"
|
||||
class="mb-3"
|
||||
data-testid="lookups-error-alert"
|
||||
>
|
||||
Не удалось загрузить списки проектов и менеджеров — показаны примерные значения. Проверьте выбор
|
||||
перед сохранением.
|
||||
</v-alert>
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* Wizard маппинга неизвестных статусов воронки из CSV-импорта (ТЗ §6.4/§6.6).
|
||||
*
|
||||
* Для каждого незамапленного русского статуса пользователь выбирает один из
|
||||
* 14 канонических slug'ов. Сохранение → POST /api/imports/unknown-statuses/resolve.
|
||||
*/
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { resolveUnknownStatuses, type StatusMapping, type UnknownStatus } from '../../api/imports';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
statuses: UnknownStatus[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean];
|
||||
resolved: [];
|
||||
}>();
|
||||
|
||||
/** 14 канонических статусов воронки (ТЗ §6.4). */
|
||||
const STATUS_OPTIONS: { value: string; title: string }[] = [
|
||||
{ value: 'new', title: 'Новые' },
|
||||
{ value: 'viewed', title: 'Просмотрено' },
|
||||
{ value: 'worked', title: 'Проработан' },
|
||||
{ value: 'base', title: 'База' },
|
||||
{ value: 'missed', title: 'Недозвон' },
|
||||
{ value: 'negotiations', title: 'Переговоры' },
|
||||
{ value: 'waiting_payment', title: 'Ожидаем оплаты' },
|
||||
{ value: 'partnership', title: 'Партнерка' },
|
||||
{ value: 'paid', title: 'Оплачено' },
|
||||
{ value: 'closed', title: 'Закрыто и не реализовано' },
|
||||
{ value: 'test_drive', title: 'Тест драйв' },
|
||||
{ value: 'hot', title: 'Горячий' },
|
||||
{ value: 'replacement', title: 'На замену' },
|
||||
{ value: 'final_missed', title: 'Конечный недозвон' },
|
||||
];
|
||||
|
||||
const selection = reactive<Record<string, string | null>>({});
|
||||
const saving = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
const dialogOpen = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v: boolean) => emit('update:modelValue', v),
|
||||
});
|
||||
|
||||
const allMapped = computed(
|
||||
() => props.statuses.length > 0 && props.statuses.every((s) => !!selection[s.status_ru]),
|
||||
);
|
||||
|
||||
async function save(): Promise<void> {
|
||||
if (!allMapped.value) {
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const mappings: StatusMapping[] = props.statuses.map((s) => ({
|
||||
status_ru: s.status_ru,
|
||||
slug: selection[s.status_ru] as string,
|
||||
}));
|
||||
await resolveUnknownStatuses(mappings);
|
||||
emit('resolved');
|
||||
} catch {
|
||||
error.value = 'Не удалось сохранить маппинг. Повторите попытку.';
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ selection, save });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog v-model="dialogOpen" max-width="640">
|
||||
<v-card>
|
||||
<v-card-title class="text-h6">Маппинг неизвестных статусов</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-body-2 text-medium-emphasis mb-4">
|
||||
Эти статусы из CSV не входят в стандартную воронку. Выберите
|
||||
соответствие — повторный импорт применит маппинг автоматически.
|
||||
</p>
|
||||
<div
|
||||
v-for="status in statuses"
|
||||
:key="status.id"
|
||||
class="d-flex align-center ga-3 mb-3"
|
||||
>
|
||||
<div class="flex-grow-1">
|
||||
<strong>{{ status.status_ru }}</strong>
|
||||
<span class="text-caption text-medium-emphasis ml-2">
|
||||
({{ status.occurrences }} шт.)
|
||||
</span>
|
||||
</div>
|
||||
<v-select
|
||||
v-model="selection[status.status_ru]"
|
||||
:items="STATUS_OPTIONS"
|
||||
label="Статус воронки"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
style="max-width: 280px"
|
||||
/>
|
||||
</div>
|
||||
<v-alert v-if="error" type="error" variant="tonal" class="mt-2">
|
||||
{{ error }}
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn variant="text" @click="dialogOpen = false">Отмена</v-btn>
|
||||
<v-btn
|
||||
data-test="save-mappings"
|
||||
color="primary"
|
||||
variant="flat"
|
||||
:loading="saving"
|
||||
:disabled="!allMapped"
|
||||
@click="save"
|
||||
>
|
||||
Сохранить
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
@@ -5,11 +5,14 @@
|
||||
* + active-marker pseudo-element + JetBrains Mono badges.
|
||||
*
|
||||
* Brand mark + nav-tree (3 группы: Работа, Финансы, Команда).
|
||||
* Counts для «Сделки» — mock.
|
||||
* Count для «Сделки» — live из API (dealsCount-store, audit B2).
|
||||
*/
|
||||
import { computed } from 'vue';
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import Kbd from '../ui/Kbd.vue';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { useDealsCountStore } from '../../stores/dealsCount';
|
||||
import { useCommandPalette } from '../../composables/useCommandPalette';
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
@@ -26,15 +29,31 @@ interface NavGroup {
|
||||
const drawerOpen = defineModel<boolean>('drawerOpen', { default: true });
|
||||
|
||||
const route = useRoute();
|
||||
const auth = useAuthStore();
|
||||
const dealsCount = useDealsCountStore();
|
||||
const { openPalette } = useCommandPalette();
|
||||
|
||||
onMounted(() => {
|
||||
if (auth.user?.tenant_id) void dealsCount.load(auth.user.tenant_id);
|
||||
});
|
||||
|
||||
const navGroups = computed<NavGroup[]>(() => [
|
||||
{
|
||||
eyebrow: 'Работа',
|
||||
items: [
|
||||
{ title: 'Проекты', icon: 'mdi-folder-multiple-outline', to: '/projects' },
|
||||
{ title: 'Сделки', icon: 'mdi-format-list-bulleted', to: '/deals', count: 247 },
|
||||
// B2: count из dealsCount-store; null → undefined (NavItem.count — number|undefined),
|
||||
// resolveCount затем → 0 и v-if скрывает бейдж пока счётчик не загружен.
|
||||
{
|
||||
title: 'Сделки',
|
||||
icon: 'mdi-format-list-bulleted',
|
||||
to: '/deals',
|
||||
count: dealsCount.count ?? undefined,
|
||||
countKey: 'deals',
|
||||
},
|
||||
{ title: 'Канбан', icon: 'mdi-view-column-outline', to: '/kanban' },
|
||||
{ title: 'Дашборд', icon: 'mdi-view-dashboard-outline', to: '/dashboard' },
|
||||
{ title: 'Импорт данных', icon: 'mdi-database-import-outline', to: '/import' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -63,7 +82,15 @@ defineExpose({ navGroups });
|
||||
<span class="ld-sidebar__brand-name">Лидерра<span class="ld-sidebar__brand-dot">.</span></span>
|
||||
</div>
|
||||
|
||||
<div class="ld-cmdk-stub" role="button" tabindex="0">
|
||||
<div
|
||||
class="ld-cmdk-stub"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
data-testid="cmdk-stub"
|
||||
@click="openPalette"
|
||||
@keydown.enter="openPalette"
|
||||
@keydown.space.prevent="openPalette"
|
||||
>
|
||||
<span class="ld-cmdk-stub__placeholder">Поиск, команды…</span>
|
||||
<Kbd dark>⌘K</Kbd>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,7 @@ import { computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { useNotificationsStore } from '../../stores/notifications';
|
||||
import { useCommandPalette } from '../../composables/useCommandPalette';
|
||||
|
||||
defineProps<{
|
||||
pageTitle: string;
|
||||
@@ -20,6 +21,7 @@ const emit = defineEmits<{
|
||||
const auth = useAuthStore();
|
||||
const notifications = useNotificationsStore();
|
||||
const router = useRouter();
|
||||
const { openPalette } = useCommandPalette();
|
||||
|
||||
const unreadDisplay = computed(() => {
|
||||
if (notifications.unreadCount === 0) return '';
|
||||
@@ -87,11 +89,7 @@ async function handleLogout(): Promise<void> {
|
||||
|
||||
<template>
|
||||
<v-app-bar :elevation="0" color="surface" class="app-topbar" :height="56">
|
||||
<v-app-bar-nav-icon
|
||||
class="d-md-none"
|
||||
aria-label="Открыть меню навигации"
|
||||
@click="emit('toggle-drawer')"
|
||||
/>
|
||||
<v-app-bar-nav-icon class="d-md-none" aria-label="Открыть меню навигации" @click="emit('toggle-drawer')" />
|
||||
|
||||
<div class="crumb">
|
||||
<strong>{{ pageTitle }}</strong>
|
||||
@@ -99,7 +97,14 @@ async function handleLogout(): Promise<void> {
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-btn variant="outlined" size="small" prepend-icon="mdi-magnify" class="searchbar mr-2" disabled>
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
size="small"
|
||||
prepend-icon="mdi-magnify"
|
||||
class="searchbar mr-2"
|
||||
data-testid="topbar-search-btn"
|
||||
@click="openPalette"
|
||||
>
|
||||
Поиск
|
||||
<template #append>
|
||||
<kbd class="search-kbd">⌘K</kbd>
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* Минимальная command-palette (audit B3). Открывается по ⌘K / Ctrl+K, кликом
|
||||
* на плашку в AppSidebar или кнопку «Поиск» в AppTopbar. Список — навигация
|
||||
* по 8 разделам портала; фильтр по подстроке; Enter → первый результат.
|
||||
* Монтируется один раз в AppLayout.
|
||||
*/
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useCommandPalette } from '../../composables/useCommandPalette';
|
||||
|
||||
interface PaletteItem {
|
||||
title: string;
|
||||
icon: string;
|
||||
to: string;
|
||||
}
|
||||
|
||||
const NAV_ITEMS: PaletteItem[] = [
|
||||
{ title: 'Проекты', icon: 'mdi-folder-multiple-outline', to: '/projects' },
|
||||
{ title: 'Сделки', icon: 'mdi-format-list-bulleted', to: '/deals' },
|
||||
{ title: 'Канбан', icon: 'mdi-view-column-outline', to: '/kanban' },
|
||||
{ title: 'Дашборд', icon: 'mdi-view-dashboard-outline', to: '/dashboard' },
|
||||
{ title: 'Импорт данных', icon: 'mdi-database-import-outline', to: '/import' },
|
||||
{ title: 'Биллинг', icon: 'mdi-credit-card-outline', to: '/billing' },
|
||||
{ title: 'Отчёты', icon: 'mdi-chart-box-outline', to: '/reports' },
|
||||
{ title: 'Настройки', icon: 'mdi-cog-outline', to: '/settings' },
|
||||
];
|
||||
|
||||
const { open, closePalette } = useCommandPalette();
|
||||
const router = useRouter();
|
||||
|
||||
const query = ref('');
|
||||
|
||||
const filteredItems = computed<PaletteItem[]>(() => {
|
||||
const q = query.value.trim().toLowerCase();
|
||||
if (q === '') return NAV_ITEMS;
|
||||
return NAV_ITEMS.filter((i) => i.title.toLowerCase().includes(q));
|
||||
});
|
||||
|
||||
// Сброс query при каждом открытии.
|
||||
watch(open, (isOpen) => {
|
||||
if (isOpen) query.value = '';
|
||||
});
|
||||
|
||||
function selectItem(item: PaletteItem): void {
|
||||
closePalette();
|
||||
void router.push(item.to);
|
||||
}
|
||||
|
||||
function onSubmit(): void {
|
||||
const first = filteredItems.value[0];
|
||||
if (first) selectItem(first);
|
||||
}
|
||||
|
||||
function onGlobalKeydown(e: KeyboardEvent): void {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
|
||||
if (open.value) return;
|
||||
e.preventDefault();
|
||||
open.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('keydown', onGlobalKeydown));
|
||||
onUnmounted(() => window.removeEventListener('keydown', onGlobalKeydown));
|
||||
|
||||
defineExpose({ query, filteredItems, selectItem, onSubmit });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog v-model="open" :max-width="520" data-testid="command-palette">
|
||||
<v-card class="cmdk-card">
|
||||
<v-text-field
|
||||
v-model="query"
|
||||
autofocus
|
||||
placeholder="Поиск разделов…"
|
||||
variant="plain"
|
||||
density="comfortable"
|
||||
hide-details
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
class="cmdk-input px-3 pt-2"
|
||||
data-testid="command-palette-input"
|
||||
@keydown.enter="onSubmit"
|
||||
/>
|
||||
<v-divider />
|
||||
<v-list density="compact" class="cmdk-list" data-testid="command-palette-list">
|
||||
<v-list-item
|
||||
v-for="item in filteredItems"
|
||||
:key="item.to"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
data-testid="command-palette-item"
|
||||
@click="selectItem(item)"
|
||||
/>
|
||||
<v-list-item
|
||||
v-if="filteredItems.length === 0"
|
||||
class="text-medium-emphasis"
|
||||
title="Ничего не найдено"
|
||||
data-testid="command-palette-empty"
|
||||
/>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cmdk-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
.cmdk-list {
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +0,0 @@
|
||||
/**
|
||||
* Мок платежа «в обработке» для pending-баннера BillingView.
|
||||
*
|
||||
* Кошелёк / транзакции / счета подключены к real API (api/billing.ts) в
|
||||
* Sprint 2 Plan C (E3). Pending-баннер — отдельный эпик E4 (Sprint 5);
|
||||
* до его реализации остаётся mock.
|
||||
*/
|
||||
export interface PendingPayment {
|
||||
code: string;
|
||||
amount: number;
|
||||
method: string;
|
||||
startedAt: string;
|
||||
autoCancelAt: string;
|
||||
timeoutMinutes: number;
|
||||
}
|
||||
|
||||
export const MOCK_PENDING: PendingPayment | null = {
|
||||
code: 'TX-89421',
|
||||
amount: 5000,
|
||||
method: 'ЮKassa',
|
||||
startedAt: '14:21',
|
||||
autoCancelAt: '14:51',
|
||||
timeoutMinutes: 30,
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
/**
|
||||
* Глобальное состояние command-palette (⌘K, audit B3). Module-level singleton
|
||||
* ref — AppSidebar/AppTopbar открывают палитру без prop-drilling, CommandPalette
|
||||
* (смонтирована один раз в AppLayout) использует тот же ref как v-model.
|
||||
*/
|
||||
const open = ref(false);
|
||||
|
||||
export function useCommandPalette() {
|
||||
return {
|
||||
open,
|
||||
openPalette: (): void => {
|
||||
open.value = true;
|
||||
},
|
||||
closePalette: (): void => {
|
||||
open.value = false;
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -18,6 +18,7 @@ import { usePolling } from '../composables/usePolling';
|
||||
import AppSidebar from '../components/layout/AppSidebar.vue';
|
||||
import AppTopbar from '../components/layout/AppTopbar.vue';
|
||||
import DevIndexBadge from '../components/DevIndexBadge.vue';
|
||||
import CommandPalette from '../components/layout/CommandPalette.vue';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const notifications = useNotificationsStore();
|
||||
@@ -73,6 +74,7 @@ usePolling(loadReminderCounts, { intervalMs: 60_000, enabled: true });
|
||||
</RouterView>
|
||||
</v-main>
|
||||
<DevIndexBadge :index="route.meta.devIndex" :label="route.meta.devLabel" />
|
||||
<CommandPalette />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -180,6 +180,19 @@ const routes: RouteRecordRaw[] = [
|
||||
devLabel: 'Напоминания',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/import',
|
||||
name: 'import',
|
||||
component: () => import('../views/ImportView.vue'),
|
||||
meta: {
|
||||
layout: 'app',
|
||||
title: 'Импорт данных',
|
||||
requiresAuth: true,
|
||||
transition: 'ld-route-fadeup',
|
||||
devIndex: 29,
|
||||
devLabel: 'Импорт данных',
|
||||
},
|
||||
},
|
||||
// Админка SaaS — отдельный layout с под-брендом ADMIN.
|
||||
// TODO: дополнительный role-guard на super_admin.
|
||||
{
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import { fetchDealsCount } from '../api/deals';
|
||||
|
||||
/**
|
||||
* Счётчик сделок tenant'а для бейджа «Сделки» в AppSidebar (audit B2).
|
||||
* count=null до загрузки или на fail → бейдж скрыт (resolveCount → 0).
|
||||
*/
|
||||
export const useDealsCountStore = defineStore('dealsCount', () => {
|
||||
const count = ref<number | null>(null);
|
||||
|
||||
async function load(tenantId: number): Promise<void> {
|
||||
try {
|
||||
count.value = await fetchDealsCount(tenantId);
|
||||
} catch {
|
||||
count.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
return { count, load };
|
||||
});
|
||||
@@ -6,9 +6,8 @@
|
||||
* Sprint 2 Plan C (E3): Overview-таб подвязан на real API
|
||||
* (GET /api/billing/wallet → BalanceCard + шапка; TransactionsTable и
|
||||
* InvoicesTable тянут данные сами). Списания — ChargesTab (Plan 4).
|
||||
*
|
||||
* Pending-баннер остаётся mock (MOCK_PENDING) — это отдельный эпик E4
|
||||
* (Sprint 5). TopupDialog «Пополнить баланс» — Task 5 (E1).
|
||||
* Sprint 5C (E4): pending-баннер убран — платёжного шлюза нет (Б-1), реального состояния «платёж в обработке» в БД не существует.
|
||||
* TopupDialog «Пополнить баланс» — Task 5 (E1).
|
||||
*/
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import BalanceCard from '../components/billing/BalanceCard.vue';
|
||||
@@ -16,7 +15,6 @@ import TransactionsTable from '../components/billing/TransactionsTable.vue';
|
||||
import InvoicesTable from '../components/billing/InvoicesTable.vue';
|
||||
import TopupDialog from '../components/billing/TopupDialog.vue';
|
||||
import ChargesTab from './billing/ChargesTab.vue';
|
||||
import { MOCK_PENDING } from '../composables/mockBilling';
|
||||
import { formatPlain, featureLabel } from '../composables/billingFormatters';
|
||||
import { getWallet, type Wallet } from '../api/billing';
|
||||
import { extractErrorMessage } from '../api/client';
|
||||
@@ -111,19 +109,6 @@ defineExpose({ loadWallet, wallet, topupOpen });
|
||||
</v-alert>
|
||||
|
||||
<template v-else-if="wallet">
|
||||
<v-alert
|
||||
v-if="MOCK_PENDING"
|
||||
type="info"
|
||||
variant="tonal"
|
||||
density="compact"
|
||||
class="mt-4"
|
||||
role="status"
|
||||
>
|
||||
<strong>1 платёж в обработке</strong> — {{ formatPlain(MOCK_PENDING.amount) }} от
|
||||
{{ MOCK_PENDING.method }}, начат {{ MOCK_PENDING.startedAt }}. Авто-восстановление в
|
||||
{{ MOCK_PENDING.autoCancelAt }} ({{ MOCK_PENDING.timeoutMinutes }} мин).
|
||||
</v-alert>
|
||||
|
||||
<BalanceCard
|
||||
:wallet-rub="walletRub"
|
||||
:leads-balance="leadsBalance"
|
||||
|
||||
@@ -345,25 +345,42 @@ async function applyBulkExport(format: 'xlsx' | 'csv' = 'xlsx') {
|
||||
exportToastOpen.value = true;
|
||||
return;
|
||||
}
|
||||
await exportDealIds([...selected.value], format);
|
||||
}
|
||||
|
||||
// С tenant_id — backend (RLS-фильтрация чужих id). На fail — fallback на
|
||||
// local CSV (даже если запросили xlsx — без backend'а xlsx не построим).
|
||||
// Audit C3: экспорт всех отфильтрованных сделок — кнопка «Экспорт» в page-head.
|
||||
async function exportAllFiltered(format: 'xlsx' | 'csv' = 'xlsx') {
|
||||
const ids = filteredDeals.value.map((d) => d.id);
|
||||
if (ids.length === 0) {
|
||||
exportToastText.value = 'Список пуст — нечего экспортировать.';
|
||||
exportToastOpen.value = true;
|
||||
return;
|
||||
}
|
||||
await exportDealIds(ids, format);
|
||||
}
|
||||
|
||||
/**
|
||||
* Общий экспорт по списку id. С tenant_id — backend (RLS-фильтрация чужих id).
|
||||
* На fail / без tenant — fallback на локальный CSV.
|
||||
*/
|
||||
async function exportDealIds(ids: number[], format: 'xlsx' | 'csv') {
|
||||
exportToastText.value = '';
|
||||
if (auth.user?.tenant_id) {
|
||||
try {
|
||||
if (format === 'xlsx') {
|
||||
const blob = await dealsApi.exportDealsXlsx({
|
||||
tenant_id: auth.user.tenant_id,
|
||||
ids: selected.value,
|
||||
ids,
|
||||
});
|
||||
triggerBlobDownload(blob, `deals_export_${new Date().toISOString().slice(0, 10)}.xlsx`);
|
||||
exportToastText.value = `Экспортировано ${selected.value.length} сделок в XLSX.`;
|
||||
exportToastText.value = `Экспортировано ${ids.length} сделок в XLSX.`;
|
||||
} else {
|
||||
const csv = await dealsApi.exportDeals({
|
||||
tenant_id: auth.user.tenant_id,
|
||||
ids: selected.value,
|
||||
ids,
|
||||
});
|
||||
triggerCsvDownload(csv, `deals_export_${new Date().toISOString().slice(0, 10)}.csv`);
|
||||
exportToastText.value = `Экспортировано ${selected.value.length} сделок в CSV.`;
|
||||
exportToastText.value = `Экспортировано ${ids.length} сделок в CSV.`;
|
||||
}
|
||||
exportToastOpen.value = true;
|
||||
return;
|
||||
@@ -372,11 +389,11 @@ async function applyBulkExport(format: 'xlsx' | 'csv' = 'xlsx') {
|
||||
}
|
||||
}
|
||||
|
||||
buildLocalCsv();
|
||||
buildLocalCsv(ids);
|
||||
}
|
||||
|
||||
function buildLocalCsv() {
|
||||
const idSet = new Set(selected.value);
|
||||
function buildLocalCsv(ids: number[]) {
|
||||
const idSet = new Set(ids);
|
||||
const rows = dealsState.filter((d) => idSet.has(d.id));
|
||||
const headers = ['ID', 'Имя', 'Телефон', 'Статус', 'Проект', 'Менеджер', 'Стоимость', 'Получено мин назад'];
|
||||
const csv = buildCsvString(
|
||||
@@ -398,6 +415,7 @@ defineExpose({
|
||||
applyBulkStatus,
|
||||
applyBulkDelete,
|
||||
applyBulkExport,
|
||||
exportAllFiltered,
|
||||
exportToastOpen,
|
||||
exportToastText,
|
||||
onDealCreated,
|
||||
@@ -513,7 +531,15 @@ const waitingPay = computed(() => dealsState.filter((d) => d.statusSlug === 'wai
|
||||
>
|
||||
{{ trashMode ? 'К сделкам' : 'Корзина' }}
|
||||
</v-btn>
|
||||
<v-btn v-if="!trashMode" variant="outlined" prepend-icon="mdi-download">Экспорт</v-btn>
|
||||
<v-btn
|
||||
v-if="!trashMode"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-download"
|
||||
data-testid="export-all-btn"
|
||||
@click="exportAllFiltered()"
|
||||
>
|
||||
Экспорт
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-if="!trashMode"
|
||||
color="primary"
|
||||
@@ -584,7 +610,12 @@ const waitingPay = computed(() => dealsState.filter((d) => d.statusSlug === 'wai
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
<v-card-actions class="px-3 pb-2">
|
||||
<v-btn variant="text" size="small" data-testid="project-menu-clear" @click="clearProjectDraft">
|
||||
<v-btn
|
||||
variant="text"
|
||||
size="small"
|
||||
data-testid="project-menu-clear"
|
||||
@click="clearProjectDraft"
|
||||
>
|
||||
Очистить
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
@@ -631,7 +662,12 @@ const waitingPay = computed(() => dealsState.filter((d) => d.statusSlug === 'wai
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
<v-card-actions class="px-3 pb-2">
|
||||
<v-btn variant="text" size="small" data-testid="manager-menu-clear" @click="clearManagerDraft">
|
||||
<v-btn
|
||||
variant="text"
|
||||
size="small"
|
||||
data-testid="manager-menu-clear"
|
||||
@click="clearManagerDraft"
|
||||
>
|
||||
Очистить
|
||||
</v-btn>
|
||||
<v-spacer />
|
||||
|
||||
@@ -0,0 +1,240 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* Импорт данных — загрузка CSV исторических лидов из crm.bp-gr.ru (ТЗ §6).
|
||||
*
|
||||
* Flow: выбрать файл → загрузить → polling прогресса → таблица результата.
|
||||
* Неизвестные статусы маппятся через UnknownStatusesDialog.
|
||||
*/
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import {
|
||||
getImport,
|
||||
getUnknownStatuses,
|
||||
listImports,
|
||||
uploadImport,
|
||||
type ImportLogResource,
|
||||
type UnknownStatus,
|
||||
} from '../api/imports';
|
||||
import UnknownStatusesDialog from '../components/import/UnknownStatusesDialog.vue';
|
||||
|
||||
const file = ref<File | null>(null);
|
||||
const dryRun = ref(false);
|
||||
const uploading = ref(false);
|
||||
const errorMessage = ref<string | null>(null);
|
||||
const history = ref<ImportLogResource[]>([]);
|
||||
const activeImport = ref<ImportLogResource | null>(null);
|
||||
const unknownStatuses = ref<UnknownStatus[]>([]);
|
||||
const wizardOpen = ref(false);
|
||||
|
||||
/** Интервал опроса прогресса активного импорта, мс. */
|
||||
const POLL_INTERVAL_MS = 2000;
|
||||
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const canUpload = computed(() => file.value !== null && !uploading.value);
|
||||
const isProcessing = computed(
|
||||
() =>
|
||||
activeImport.value?.status === 'pending' ||
|
||||
activeImport.value?.status === 'processing',
|
||||
);
|
||||
|
||||
async function refreshHistory(): Promise<void> {
|
||||
try {
|
||||
history.value = await listImports();
|
||||
} catch {
|
||||
// история — не критично, тихо игнорируем
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshUnknown(): Promise<void> {
|
||||
try {
|
||||
unknownStatuses.value = await getUnknownStatuses();
|
||||
} catch {
|
||||
unknownStatuses.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
function stopPolling(): void {
|
||||
if (pollTimer !== null) {
|
||||
clearInterval(pollTimer);
|
||||
pollTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function pollOnce(id: number): Promise<void> {
|
||||
try {
|
||||
activeImport.value = await getImport(id);
|
||||
if (!isProcessing.value) {
|
||||
stopPolling();
|
||||
await refreshHistory();
|
||||
await refreshUnknown();
|
||||
}
|
||||
} catch {
|
||||
stopPolling();
|
||||
}
|
||||
}
|
||||
|
||||
function startPolling(id: number): void {
|
||||
stopPolling();
|
||||
pollTimer = setInterval(() => {
|
||||
void pollOnce(id);
|
||||
}, POLL_INTERVAL_MS);
|
||||
}
|
||||
|
||||
async function submit(): Promise<void> {
|
||||
if (file.value === null) {
|
||||
return;
|
||||
}
|
||||
uploading.value = true;
|
||||
errorMessage.value = null;
|
||||
try {
|
||||
activeImport.value = await uploadImport(file.value, dryRun.value);
|
||||
startPolling(activeImport.value.id);
|
||||
file.value = null;
|
||||
} catch {
|
||||
errorMessage.value = 'Не удалось загрузить файл. Проверьте формат (CSV, до 10 МБ).';
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onWizardResolved(): Promise<void> {
|
||||
wizardOpen.value = false;
|
||||
await refreshUnknown();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshHistory();
|
||||
await refreshUnknown();
|
||||
});
|
||||
|
||||
onUnmounted(stopPolling);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container fluid class="import-view pa-6">
|
||||
<header class="page-head mb-4">
|
||||
<h1 class="text-h4 mb-2">Импорт данных</h1>
|
||||
<p class="text-body-2 text-medium-emphasis ma-0">
|
||||
Перенос исторических лидов из crm.bp-gr.ru. Формат — CSV-выгрузка (UTF-8).
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<v-alert
|
||||
v-if="unknownStatuses.length > 0"
|
||||
data-test="unknown-banner"
|
||||
type="warning"
|
||||
variant="tonal"
|
||||
class="mb-4"
|
||||
>
|
||||
Найдено {{ unknownStatuses.length }} неизвестных статусов воронки — замапьте вручную.
|
||||
<template #append>
|
||||
<v-btn size="small" variant="flat" @click="wizardOpen = true">Замапить</v-btn>
|
||||
</template>
|
||||
</v-alert>
|
||||
|
||||
<v-card variant="outlined" class="pa-6 mb-6">
|
||||
<v-file-input
|
||||
v-model="file"
|
||||
label="CSV-файл выгрузки лидов"
|
||||
accept=".csv,text/csv"
|
||||
prepend-icon="mdi-database-import-outline"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:disabled="uploading"
|
||||
/>
|
||||
<v-checkbox
|
||||
v-model="dryRun"
|
||||
label="Пробный прогон (проверить файл без записи сделок)"
|
||||
density="compact"
|
||||
hide-details
|
||||
/>
|
||||
<v-alert v-if="errorMessage" type="error" variant="tonal" class="mt-3">
|
||||
{{ errorMessage }}
|
||||
</v-alert>
|
||||
<div class="mt-4">
|
||||
<v-btn
|
||||
data-test="upload-btn"
|
||||
color="primary"
|
||||
:loading="uploading"
|
||||
:disabled="!canUpload"
|
||||
@click="submit"
|
||||
>
|
||||
Загрузить
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<v-card v-if="activeImport" variant="outlined" class="pa-6 mb-6">
|
||||
<h2 class="text-h6 mb-3">Текущий импорт — {{ activeImport.filename }}</h2>
|
||||
<v-progress-linear v-if="isProcessing" indeterminate color="primary" class="mb-3" />
|
||||
<div data-test="active-status" class="text-body-2">
|
||||
Статус: <strong>{{ activeImport.status }}</strong>
|
||||
</div>
|
||||
<v-table v-if="!isProcessing" density="compact" class="mt-3">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Добавлено</td>
|
||||
<td>{{ activeImport.rows_added }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Обновлено</td>
|
||||
<td>{{ activeImport.rows_updated }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Пропущено</td>
|
||||
<td>{{ activeImport.rows_skipped }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Неизвестных статусов</td>
|
||||
<td>{{ activeImport.unknown_statuses_count }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<v-alert
|
||||
v-if="activeImport.status === 'failed'"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
class="mt-3"
|
||||
>
|
||||
{{ activeImport.error_message }}
|
||||
</v-alert>
|
||||
</v-card>
|
||||
|
||||
<v-card variant="outlined" class="pa-6">
|
||||
<h2 class="text-h6 mb-3">История импортов</h2>
|
||||
<v-table v-if="history.length > 0" density="compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Файл</th>
|
||||
<th>Статус</th>
|
||||
<th>Добавлено</th>
|
||||
<th>Обновлено</th>
|
||||
<th>Пропущено</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in history" :key="row.id">
|
||||
<td>{{ row.filename }}</td>
|
||||
<td>{{ row.status }}</td>
|
||||
<td>{{ row.rows_added }}</td>
|
||||
<td>{{ row.rows_updated }}</td>
|
||||
<td>{{ row.rows_skipped }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<p v-else class="text-body-2 text-medium-emphasis ma-0">Импортов пока нет.</p>
|
||||
</v-card>
|
||||
|
||||
<UnknownStatusesDialog
|
||||
v-model="wizardOpen"
|
||||
:statuses="unknownStatuses"
|
||||
@resolved="onWizardResolved"
|
||||
/>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.import-view {
|
||||
max-width: 1100px;
|
||||
}
|
||||
</style>
|
||||
@@ -50,14 +50,24 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-btn color="primary" prepend-icon="mdi-pencil" data-testid="open-editor-btn" @click="editorOpen = true">
|
||||
<v-btn color="primary" prepend-icon="mdi-pencil" data-testid="open-editor-btn" @click="openEditor">
|
||||
Редактировать сетку (с {{ nextMonthStart }})
|
||||
</v-btn>
|
||||
|
||||
<v-dialog v-model="editorOpen" max-width="900">
|
||||
<v-card>
|
||||
<v-card-title>Новая сетка (effective_from = {{ nextMonthStart }})</v-card-title>
|
||||
<v-card-title>Новая сетка (effective_from = {{ effectiveFrom }})</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="effectiveFrom"
|
||||
type="date"
|
||||
label="Дата вступления в силу"
|
||||
:min="minEffectiveFrom"
|
||||
density="compact"
|
||||
class="mb-3"
|
||||
style="max-width: 240px"
|
||||
data-testid="effective-from-input"
|
||||
/>
|
||||
<table class="editor-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -102,6 +112,21 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog v-model="deleteDialogOpen" max-width="440">
|
||||
<v-card>
|
||||
<v-card-title>Удалить запланированный набор?</v-card-title>
|
||||
<v-card-text>
|
||||
Запланированная сетка с <strong>{{ deleteTarget }}</strong> будет удалена.
|
||||
Действие необратимо.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn @click="deleteDialogOpen = false">Отмена</v-btn>
|
||||
<v-btn color="error" data-testid="confirm-delete-btn" @click="performDelete">Удалить</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar
|
||||
v-model="successToastOpen"
|
||||
:timeout="4000"
|
||||
@@ -116,7 +141,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { getPricingTiers, createPricingTiers, deleteScheduledPricingTier, type AdminPricingTier, type PricingTierEditorRow } from '../../api/admin';
|
||||
import { extractErrorMessage } from '../../api/client';
|
||||
|
||||
/**
|
||||
@@ -128,20 +153,8 @@ import { extractErrorMessage } from '../../api/client';
|
||||
* defineExpose ниже — для Vitest unit-тестов.
|
||||
*/
|
||||
|
||||
interface Tier {
|
||||
tier_no: number;
|
||||
leads_in_tier: number | null;
|
||||
price_per_lead_kopecks: number;
|
||||
effective_from: string;
|
||||
}
|
||||
interface EditorRow {
|
||||
tier_no: number;
|
||||
leads_in_tier: number | null;
|
||||
price_rub: string;
|
||||
}
|
||||
|
||||
const active = ref<Tier[]>([]);
|
||||
const scheduled = ref<Record<string, Tier[]>>({});
|
||||
const active = ref<AdminPricingTier[]>([]);
|
||||
const scheduled = ref<Record<string, AdminPricingTier[]>>({});
|
||||
const editorOpen = ref(false);
|
||||
const saving = ref(false);
|
||||
|
||||
@@ -150,7 +163,11 @@ const errorMessage = ref<string | null>(null);
|
||||
const successMessage = ref<string | null>(null);
|
||||
const successToastOpen = ref(false);
|
||||
|
||||
const defaultEditor: EditorRow[] = [
|
||||
// G10: диалог подтверждения удаления (замена window.confirm).
|
||||
const deleteDialogOpen = ref(false);
|
||||
const deleteTarget = ref<string | null>(null);
|
||||
|
||||
const defaultEditor: PricingTierEditorRow[] = [
|
||||
{ tier_no: 1, leads_in_tier: 100, price_rub: '500.00' },
|
||||
{ tier_no: 2, leads_in_tier: 200, price_rub: '450.00' },
|
||||
{ tier_no: 3, leads_in_tier: 400, price_rub: '400.00' },
|
||||
@@ -159,7 +176,7 @@ const defaultEditor: EditorRow[] = [
|
||||
{ tier_no: 6, leads_in_tier: 3000, price_rub: '270.00' },
|
||||
{ tier_no: 7, leads_in_tier: null, price_rub: '250.00' },
|
||||
];
|
||||
const editor = ref<EditorRow[]>(JSON.parse(JSON.stringify(defaultEditor)));
|
||||
const editor = ref<PricingTierEditorRow[]>(JSON.parse(JSON.stringify(defaultEditor)));
|
||||
|
||||
const tierHeaders = [
|
||||
{ title: '№', key: 'tier_no', sortable: false, width: 80 },
|
||||
@@ -174,13 +191,21 @@ const nextMonthStart = computed(() => {
|
||||
return d.toISOString().slice(0, 10);
|
||||
});
|
||||
|
||||
const effectiveFrom = ref<string>(nextMonthStart.value);
|
||||
|
||||
const minEffectiveFrom = computed(() => {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() + 1);
|
||||
return d.toISOString().slice(0, 10);
|
||||
});
|
||||
|
||||
const hasScheduled = computed(() => Object.keys(scheduled.value).length > 0);
|
||||
|
||||
async function load(): Promise<void> {
|
||||
try {
|
||||
const { data } = await axios.get('/api/admin/pricing-tiers');
|
||||
active.value = data.data.active;
|
||||
scheduled.value = data.data.scheduled || {};
|
||||
const data = await getPricingTiers();
|
||||
active.value = data.active;
|
||||
scheduled.value = data.scheduled;
|
||||
} catch (err) {
|
||||
errorMessage.value = extractErrorMessage(err, 'Не удалось загрузить тарифную сетку.');
|
||||
}
|
||||
@@ -191,9 +216,9 @@ async function submit(): Promise<void> {
|
||||
errorMessage.value = null;
|
||||
successMessage.value = null;
|
||||
try {
|
||||
await axios.post('/api/admin/pricing-tiers', { tiers: editor.value });
|
||||
await createPricingTiers(editor.value, effectiveFrom.value);
|
||||
editorOpen.value = false;
|
||||
successMessage.value = `Сохранено: новая сетка вступит в силу с ${nextMonthStart.value}.`;
|
||||
successMessage.value = `Сохранено: новая сетка вступит в силу с ${effectiveFrom.value}.`;
|
||||
successToastOpen.value = true;
|
||||
await load();
|
||||
} catch (err) {
|
||||
@@ -204,19 +229,31 @@ async function submit(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete(effectiveFrom: string): Promise<void> {
|
||||
if (!window.confirm(`Удалить запланированный набор с ${effectiveFrom}?`)) {
|
||||
return;
|
||||
}
|
||||
function openEditor(): void {
|
||||
effectiveFrom.value = nextMonthStart.value;
|
||||
editorOpen.value = true;
|
||||
}
|
||||
|
||||
function confirmDelete(effectiveFromDate: string): void {
|
||||
deleteTarget.value = effectiveFromDate;
|
||||
deleteDialogOpen.value = true;
|
||||
}
|
||||
|
||||
async function performDelete(): Promise<void> {
|
||||
const effectiveFromDate = deleteTarget.value;
|
||||
if (effectiveFromDate === null) return;
|
||||
deleteDialogOpen.value = false;
|
||||
errorMessage.value = null;
|
||||
successMessage.value = null;
|
||||
try {
|
||||
await axios.delete(`/api/admin/pricing-tiers/scheduled/${effectiveFrom}`);
|
||||
successMessage.value = `Удалено: запланированный набор с ${effectiveFrom}.`;
|
||||
await deleteScheduledPricingTier(effectiveFromDate);
|
||||
successMessage.value = `Удалено: запланированный набор с ${effectiveFromDate}.`;
|
||||
successToastOpen.value = true;
|
||||
await load();
|
||||
} catch (err) {
|
||||
errorMessage.value = extractErrorMessage(err, 'Не удалось удалить запланированный набор.');
|
||||
} finally {
|
||||
deleteTarget.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -225,7 +262,9 @@ onMounted(load);
|
||||
defineExpose({
|
||||
load,
|
||||
submit,
|
||||
openEditor,
|
||||
confirmDelete,
|
||||
performDelete,
|
||||
editorOpen,
|
||||
active,
|
||||
scheduled,
|
||||
@@ -234,6 +273,9 @@ defineExpose({
|
||||
successMessage,
|
||||
successToastOpen,
|
||||
saving,
|
||||
effectiveFrom,
|
||||
deleteDialogOpen,
|
||||
deleteTarget,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { getAdminSuppliers, updateAdminSupplier, type AdminSupplier } from '../../api/admin';
|
||||
import { extractErrorMessage } from '../../api/client';
|
||||
|
||||
/**
|
||||
@@ -100,16 +100,7 @@ import { extractErrorMessage } from '../../api/client';
|
||||
* defineExpose ниже — для Vitest unit-тестов.
|
||||
*/
|
||||
|
||||
interface SupplierRow {
|
||||
id: number;
|
||||
code: string;
|
||||
name: string;
|
||||
cost_rub: string;
|
||||
quality_score: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
const suppliers = ref<SupplierRow[]>([]);
|
||||
const suppliers = ref<AdminSupplier[]>([]);
|
||||
const saving = reactive<Record<number, boolean>>({});
|
||||
const errorMessages = reactive<Record<number, string>>({});
|
||||
const fetchError = ref<string | null>(null);
|
||||
@@ -128,22 +119,17 @@ const headers = [
|
||||
async function load(): Promise<void> {
|
||||
fetchError.value = null;
|
||||
try {
|
||||
const { data } = await axios.get('/api/admin/suppliers');
|
||||
suppliers.value = data.data;
|
||||
suppliers.value = await getAdminSuppliers();
|
||||
} catch (err) {
|
||||
fetchError.value = extractErrorMessage(err, 'Не удалось загрузить список поставщиков.');
|
||||
}
|
||||
}
|
||||
|
||||
async function save(s: SupplierRow): Promise<void> {
|
||||
async function save(s: AdminSupplier): Promise<void> {
|
||||
saving[s.id] = true;
|
||||
delete errorMessages[s.id]; // очистить предыдущую ошибку перед retry
|
||||
try {
|
||||
await axios.patch(`/api/admin/suppliers/${s.id}`, {
|
||||
cost_rub: s.cost_rub,
|
||||
quality_score: s.quality_score,
|
||||
is_active: s.is_active,
|
||||
});
|
||||
await updateAdminSupplier(s.id, { cost_rub: s.cost_rub, quality_score: s.quality_score, is_active: s.is_active });
|
||||
successToastText.value = `Сохранено: ${s.name} (${s.code}).`;
|
||||
successToastOpen.value = true;
|
||||
} catch (err) {
|
||||
|
||||
@@ -104,7 +104,18 @@ async function handleSubmit() {
|
||||
<span class="text-caption text-medium-emphasis">или</span>
|
||||
</v-divider>
|
||||
|
||||
<v-btn block size="large" variant="outlined"> Войти через Yandex 360 </v-btn>
|
||||
<v-tooltip
|
||||
text="Вход через Yandex 360 станет доступен после регистрации юр. лица (Б-1)."
|
||||
location="top"
|
||||
>
|
||||
<template #activator="{ props }">
|
||||
<div v-bind="props" class="yandex-sso-wrap">
|
||||
<v-btn block size="large" variant="outlined" disabled>
|
||||
Войти через Yandex 360
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-form>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -126,4 +137,8 @@ async function handleSubmit() {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.yandex-sso-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,6 +37,17 @@ const canSubmit = computed(
|
||||
password.value === passwordConfirmation.value,
|
||||
);
|
||||
|
||||
/**
|
||||
* Ошибка поля подтверждения: client-side проверка совпадения +
|
||||
* проброс backend-ошибки `password_confirmation` если придёт с 422.
|
||||
*/
|
||||
const confirmationError = computed<string[]>(() => {
|
||||
if (passwordConfirmation.value.length > 0 && password.value !== passwordConfirmation.value) {
|
||||
return ['Пароли не совпадают'];
|
||||
}
|
||||
return errors.value.password_confirmation ?? [];
|
||||
});
|
||||
|
||||
async function handleSubmit() {
|
||||
errors.value = {};
|
||||
try {
|
||||
@@ -115,6 +126,7 @@ async function handleSubmit() {
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
required
|
||||
:error-messages="confirmationError"
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
*/
|
||||
import { extractValidationErrors } from '../../api/client';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
|
||||
import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const code = ref(['', '', '', '', '', '']);
|
||||
@@ -27,12 +27,32 @@ const router = useRouter();
|
||||
|
||||
const userEmail = computed(() => auth.user?.email ?? 'аккаунт');
|
||||
|
||||
/**
|
||||
* TOTP-окно: код в приложении-аутентификаторе меняется каждые 30 секунд.
|
||||
* Показываем честный обратный отсчёт до смены кода (заменяет хардкод «02:34»).
|
||||
* Значение 30..1 секунд, формат «00:NN».
|
||||
*/
|
||||
function totpWindowLeft(): number {
|
||||
return 30 - (Math.floor(Date.now() / 1000) % 30);
|
||||
}
|
||||
const totpSecondsLeft = ref(totpWindowLeft());
|
||||
const totpCountdown = computed(() => `00:${String(totpSecondsLeft.value).padStart(2, '0')}`);
|
||||
let totpTimer: ReturnType<typeof setInterval> | undefined;
|
||||
|
||||
// Если попали на /2fa без pending state (requires2fa=false и не залогинен) —
|
||||
// прямой URL без login → отправляем на /login.
|
||||
onMounted(() => {
|
||||
if (!auth.requires2fa && !auth.isAuthenticated) {
|
||||
router.replace('/login');
|
||||
return;
|
||||
}
|
||||
totpTimer = setInterval(() => {
|
||||
totpSecondsLeft.value = totpWindowLeft();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (totpTimer) clearInterval(totpTimer);
|
||||
});
|
||||
|
||||
function onInput(index: number, event: Event) {
|
||||
@@ -126,7 +146,12 @@ async function handleSubmit() {
|
||||
<RouterLink to="/recovery-use" class="text-body-2 text-primary">
|
||||
Использовать резервный код
|
||||
</RouterLink>
|
||||
<span class="text-caption text-medium-emphasis font-mono">02:34</span>
|
||||
<span
|
||||
class="text-caption text-medium-emphasis font-mono"
|
||||
:title="`До смены кода в приложении: ${totpCountdown}`"
|
||||
data-testid="totp-countdown"
|
||||
>{{ totpCountdown }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<x-mail::message>
|
||||
@if ($outcome === 'done')
|
||||
# Импорт завершён
|
||||
|
||||
Импорт файла **{{ $log->filename }}** успешно завершён.
|
||||
|
||||
| Показатель | Значение |
|
||||
|:-----------|---------:|
|
||||
| Добавлено сделок | {{ $log->rows_added }} |
|
||||
| Обновлено сделок | {{ $log->rows_updated }} |
|
||||
| Пропущено строк | {{ $log->rows_skipped }} |
|
||||
| Неизвестных статусов | {{ $log->unknown_statuses_count }} |
|
||||
|
||||
@if ($log->unknown_statuses_count > 0)
|
||||
Обнаружены неизвестные статусы воронки — замапьте их вручную на экране «Импорт данных».
|
||||
@endif
|
||||
@else
|
||||
# Импорт не удался
|
||||
|
||||
Импорт файла **{{ $log->filename }}** завершился ошибкой:
|
||||
|
||||
> {{ $log->error_message }}
|
||||
|
||||
Проверьте формат файла и повторите загрузку на экране «Импорт данных».
|
||||
@endif
|
||||
|
||||
<x-mail::button :url="config('app.url').'/import'">
|
||||
Открыть «Импорт данных»
|
||||
</x-mail::button>
|
||||
|
||||
С уважением,<br>
|
||||
Лидерра
|
||||
</x-mail::message>
|
||||
+94
-75
@@ -79,69 +79,74 @@ Route::get('/api/reports/jobs/{id}/file', 'App\Http\Controllers\Api\ReportJobCon
|
||||
->name('reports.download')
|
||||
->middleware('signed');
|
||||
|
||||
// SaaS-admin impersonation flow (Ю-1). На MVP без middleware (saas-admin auth
|
||||
// не реализован), production: middleware('auth:saas-admin') + role('compliance' if needed).
|
||||
Route::prefix('/api/admin/impersonation')->group(function () {
|
||||
Route::get('/active', 'App\Http\Controllers\Api\ImpersonationController@active');
|
||||
Route::get('/recent', 'App\Http\Controllers\Api\ImpersonationController@recent');
|
||||
Route::post('/init', 'App\Http\Controllers\Api\ImpersonationController@init');
|
||||
Route::post('/verify', 'App\Http\Controllers\Api\ImpersonationController@verify');
|
||||
Route::post('/end', 'App\Http\Controllers\Api\ImpersonationController@end');
|
||||
// J2 (Sprint 3F): стаб-гейт SaaS-admin зоны. EnsureSaasAdmin — dev/testing
|
||||
// пропускает, production fail-closed 503. Реальный Yandex 360 SSO — TODO под
|
||||
// Б-1+DO-4. admin_user_id внутри контроллеров (трейт ResolvesAdminUserId)
|
||||
// стаб не меняет — это отдельная зона ответственности.
|
||||
Route::middleware('saas-admin')->group(function () {
|
||||
// SaaS-admin impersonation flow (Ю-1). На MVP без middleware (saas-admin auth
|
||||
// не реализован), production: middleware('auth:saas-admin') + role('compliance' if needed).
|
||||
Route::prefix('/api/admin/impersonation')->group(function () {
|
||||
Route::get('/active', 'App\Http\Controllers\Api\ImpersonationController@active');
|
||||
Route::get('/recent', 'App\Http\Controllers\Api\ImpersonationController@recent');
|
||||
Route::post('/init', 'App\Http\Controllers\Api\ImpersonationController@init');
|
||||
Route::post('/verify', 'App\Http\Controllers\Api\ImpersonationController@verify');
|
||||
Route::post('/end', 'App\Http\Controllers\Api\ImpersonationController@end');
|
||||
});
|
||||
|
||||
// SaaS-admin → Тенанты: lookup + детали для AdminTenantsView/AdminTenantDetailView.
|
||||
Route::get('/api/admin/tenants', 'App\Http\Controllers\Api\AdminTenantsController@index');
|
||||
Route::get('/api/admin/tenants/{subdomain}', 'App\Http\Controllers\Api\AdminTenantsController@show')
|
||||
->where('subdomain', '[a-z0-9_-]+');
|
||||
|
||||
// SaaS-admin → Биллинг: aggregates пополнений/списаний за текущий месяц.
|
||||
Route::get('/api/admin/billing', 'App\Http\Controllers\Api\AdminBillingController@index');
|
||||
|
||||
// Sprint 3D (G4): SaaS-admin billing row-actions — приостановка/возврат/смена тарифа.
|
||||
Route::get('/api/admin/billing/tariff-plans', 'App\Http\Controllers\Api\AdminBillingController@tariffPlans');
|
||||
Route::patch('/api/admin/billing/tenants/{id}/status', 'App\Http\Controllers\Api\AdminBillingController@updateStatus')
|
||||
->where('id', '[0-9]+');
|
||||
Route::post('/api/admin/billing/tenants/{id}/refund', 'App\Http\Controllers\Api\AdminBillingController@refund')
|
||||
->where('id', '[0-9]+');
|
||||
Route::patch('/api/admin/billing/tenants/{id}/tariff', 'App\Http\Controllers\Api\AdminBillingController@changeTariff')
|
||||
->where('id', '[0-9]+');
|
||||
|
||||
// SaaS-admin → Инциденты: чтение incidents_log для AdminIncidentsView.
|
||||
Route::get('/api/admin/incidents', 'App\Http\Controllers\Api\AdminIncidentsController@index');
|
||||
|
||||
// Sprint 3D (G5): SaaS-admin incident detail-view drill-down.
|
||||
Route::get('/api/admin/incidents/{id}', 'App\Http\Controllers\Api\AdminIncidentsController@show')
|
||||
->where('id', '[0-9]+');
|
||||
|
||||
// Sprint 3D (G6): РКН-notify endpoint (152-ФЗ).
|
||||
Route::post('/api/admin/incidents/{id}/rkn-notify', 'App\Http\Controllers\Api\AdminIncidentsController@notifyRkn')
|
||||
->where('id', '[0-9]+');
|
||||
|
||||
// SaaS-admin → Система: edit-flow для system_settings + audit-log (4-eyes-pattern).
|
||||
// На MVP без auth-middleware (admin_user_id параметром); production: middleware('auth:saas-admin').
|
||||
Route::prefix('/api/admin/system-settings')->group(function () {
|
||||
Route::get('/', 'App\Http\Controllers\Api\AdminSystemSettingsController@index');
|
||||
Route::put('/{key}', 'App\Http\Controllers\Api\AdminSystemSettingsController@update')->where('key', '[a-z0-9_\.]+');
|
||||
});
|
||||
|
||||
// Plan 4: SaaS-admin pricing-tiers editor.
|
||||
// CRUD для 7-ступенчатого тарифа. effective_from auto-computed = 1-е число
|
||||
// следующего месяца (МСК). Audit-trail в saas_admin_audit_log.
|
||||
Route::prefix('/api/admin/pricing-tiers')->group(function () {
|
||||
Route::get('/', 'App\Http\Controllers\Api\AdminPricingTiersController@index');
|
||||
Route::post('/', 'App\Http\Controllers\Api\AdminPricingTiersController@store');
|
||||
Route::delete('/scheduled/{effective_from}',
|
||||
'App\Http\Controllers\Api\AdminPricingTiersController@deleteScheduled')
|
||||
->where('effective_from', '\d{4}-\d{2}-\d{2}');
|
||||
});
|
||||
|
||||
// Plan 4 Task 10: SaaS-admin supplier prices editor.
|
||||
// CRUD для B1/B2/B3 закупочных цен. Audit-trail в saas_admin_audit_log.
|
||||
Route::get('/api/admin/suppliers', 'App\Http\Controllers\Api\AdminSuppliersController@index');
|
||||
Route::patch('/api/admin/suppliers/{id}', 'App\Http\Controllers\Api\AdminSuppliersController@update')
|
||||
->where('id', '[0-9]+');
|
||||
});
|
||||
|
||||
// SaaS-admin → Тенанты: lookup + детали для AdminTenantsView/AdminTenantDetailView.
|
||||
// Без auth (saas-admin SSO ⏸ Б-1).
|
||||
Route::get('/api/admin/tenants', 'App\Http\Controllers\Api\AdminTenantsController@index');
|
||||
Route::get('/api/admin/tenants/{subdomain}', 'App\Http\Controllers\Api\AdminTenantsController@show')
|
||||
->where('subdomain', '[a-z0-9_-]+');
|
||||
|
||||
// SaaS-admin → Биллинг: aggregates пополнений/списаний за текущий месяц.
|
||||
Route::get('/api/admin/billing', 'App\Http\Controllers\Api\AdminBillingController@index');
|
||||
|
||||
// Sprint 3D (G4): SaaS-admin billing row-actions — приостановка/возврат/смена тарифа.
|
||||
Route::get('/api/admin/billing/tariff-plans', 'App\Http\Controllers\Api\AdminBillingController@tariffPlans');
|
||||
Route::patch('/api/admin/billing/tenants/{id}/status', 'App\Http\Controllers\Api\AdminBillingController@updateStatus')
|
||||
->where('id', '[0-9]+');
|
||||
Route::post('/api/admin/billing/tenants/{id}/refund', 'App\Http\Controllers\Api\AdminBillingController@refund')
|
||||
->where('id', '[0-9]+');
|
||||
Route::patch('/api/admin/billing/tenants/{id}/tariff', 'App\Http\Controllers\Api\AdminBillingController@changeTariff')
|
||||
->where('id', '[0-9]+');
|
||||
|
||||
// SaaS-admin → Инциденты: чтение incidents_log для AdminIncidentsView.
|
||||
Route::get('/api/admin/incidents', 'App\Http\Controllers\Api\AdminIncidentsController@index');
|
||||
|
||||
// Sprint 3D (G5): SaaS-admin incident detail-view drill-down.
|
||||
Route::get('/api/admin/incidents/{id}', 'App\Http\Controllers\Api\AdminIncidentsController@show')
|
||||
->where('id', '[0-9]+');
|
||||
|
||||
// Sprint 3D (G6): РКН-notify endpoint (152-ФЗ).
|
||||
Route::post('/api/admin/incidents/{id}/rkn-notify', 'App\Http\Controllers\Api\AdminIncidentsController@notifyRkn')
|
||||
->where('id', '[0-9]+');
|
||||
|
||||
// SaaS-admin → Система: edit-flow для system_settings + audit-log (4-eyes-pattern).
|
||||
// На MVP без auth-middleware (admin_user_id параметром); production: middleware('auth:saas-admin').
|
||||
Route::prefix('/api/admin/system-settings')->group(function () {
|
||||
Route::get('/', 'App\Http\Controllers\Api\AdminSystemSettingsController@index');
|
||||
Route::put('/{key}', 'App\Http\Controllers\Api\AdminSystemSettingsController@update')->where('key', '[a-z0-9_\.]+');
|
||||
});
|
||||
|
||||
// Plan 4: SaaS-admin pricing-tiers editor.
|
||||
// CRUD для 7-ступенчатого тарифа. effective_from auto-computed = 1-е число
|
||||
// следующего месяца (МСК). Audit-trail в saas_admin_audit_log.
|
||||
Route::prefix('/api/admin/pricing-tiers')->group(function () {
|
||||
Route::get('/', 'App\Http\Controllers\Api\AdminPricingTiersController@index');
|
||||
Route::post('/', 'App\Http\Controllers\Api\AdminPricingTiersController@store');
|
||||
Route::delete('/scheduled/{effective_from}',
|
||||
'App\Http\Controllers\Api\AdminPricingTiersController@deleteScheduled')
|
||||
->where('effective_from', '\d{4}-\d{2}-\d{2}');
|
||||
});
|
||||
|
||||
// Plan 4 Task 10: SaaS-admin supplier prices editor.
|
||||
// CRUD для B1/B2/B3 закупочных цен. Audit-trail в saas_admin_audit_log.
|
||||
Route::get('/api/admin/suppliers', 'App\Http\Controllers\Api\AdminSuppliersController@index');
|
||||
Route::patch('/api/admin/suppliers/{id}', 'App\Http\Controllers\Api\AdminSuppliersController@update')
|
||||
->where('id', '[0-9]+');
|
||||
|
||||
// Plan 4 Task 11: tenant charges ledger (read-only + CSV export).
|
||||
// RLS изоляция через SetTenantContext (auth:sanctum + tenant) — текущий tenant
|
||||
// видит только свои lead_charges. Pagination 20/page, фильтры period/source.
|
||||
@@ -176,21 +181,34 @@ Route::middleware(['auth:sanctum', 'tenant'])->group(function () {
|
||||
// auth-middleware (tenant_id параметром); production: middleware('auth:sanctum','tenant').
|
||||
Route::get('/api/dashboard/summary', 'App\Http\Controllers\Api\DashboardController@summary');
|
||||
|
||||
// Сделки — manual create через UI (NewDealDialog). На prod: middleware
|
||||
// 'auth:sanctum' + 'tenant', tenant_id берётся из user'а. На MVP — параметром.
|
||||
// Сделки — single-resource CRUD + bulk + export. J1 (Sprint 3F, audit):
|
||||
// auth:sanctum + tenant. tenant_id берётся из auth()->user()->tenant_id
|
||||
// (SetTenantContext), НЕ из параметра запроса — закрывает кросс-tenant утечку.
|
||||
//
|
||||
// Sprint 3 Phase A (audit O-refactor-01): single-resource CRUD остаётся в
|
||||
// DealController, bulk-операции (transition/destroy/restore) — в
|
||||
// DealBulkActionController, export — в DealExportController. URL и shape
|
||||
// payload'ов сохранены, только controller@method обновлён.
|
||||
Route::get('/api/deals', 'App\Http\Controllers\Api\DealController@index');
|
||||
Route::get('/api/deals/{id}', 'App\Http\Controllers\Api\DealController@show')->where('id', '[0-9]+');
|
||||
Route::post('/api/deals', 'App\Http\Controllers\Api\DealController@store');
|
||||
Route::post('/api/deals/export', 'App\Http\Controllers\Api\DealExportController@export');
|
||||
Route::post('/api/deals/transition', 'App\Http\Controllers\Api\DealBulkActionController@transition');
|
||||
Route::patch('/api/deals/{id}', 'App\Http\Controllers\Api\DealController@update')->where('id', '[0-9]+');
|
||||
Route::delete('/api/deals', 'App\Http\Controllers\Api\DealBulkActionController@destroy');
|
||||
Route::post('/api/deals/restore', 'App\Http\Controllers\Api\DealBulkActionController@restore');
|
||||
// Sprint 3 Phase A (audit O-refactor-01): single-resource CRUD в
|
||||
// DealController, bulk (transition/destroy/restore) — в
|
||||
// DealBulkActionController, export — в DealExportController.
|
||||
Route::middleware(['auth:sanctum', 'tenant'])->group(function () {
|
||||
Route::get('/api/deals', 'App\Http\Controllers\Api\DealController@index');
|
||||
Route::get('/api/deals/{id}', 'App\Http\Controllers\Api\DealController@show')->where('id', '[0-9]+');
|
||||
Route::post('/api/deals', 'App\Http\Controllers\Api\DealController@store');
|
||||
Route::post('/api/deals/export', 'App\Http\Controllers\Api\DealExportController@export');
|
||||
Route::post('/api/deals/transition', 'App\Http\Controllers\Api\DealBulkActionController@transition');
|
||||
Route::patch('/api/deals/{id}', 'App\Http\Controllers\Api\DealController@update')->where('id', '[0-9]+');
|
||||
Route::delete('/api/deals', 'App\Http\Controllers\Api\DealBulkActionController@destroy');
|
||||
Route::post('/api/deals/restore', 'App\Http\Controllers\Api\DealBulkActionController@restore');
|
||||
});
|
||||
|
||||
// Sprint 4 — CSV-импорт исторических лидов (ТЗ §6).
|
||||
// ВАЖНО: /unknown-statuses и /unknown-statuses/resolve объявлены ДО
|
||||
// /{importLog}, иначе литеральный сегмент перехватывается параметром.
|
||||
Route::middleware(['auth:sanctum', 'tenant'])->group(function () {
|
||||
Route::get('/api/imports/unknown-statuses', 'App\Http\Controllers\Api\ImportController@unknownStatuses');
|
||||
Route::post('/api/imports/unknown-statuses/resolve', 'App\Http\Controllers\Api\ImportController@resolveUnknownStatuses');
|
||||
Route::get('/api/imports', 'App\Http\Controllers\Api\ImportController@index');
|
||||
Route::post('/api/imports', 'App\Http\Controllers\Api\ImportController@store');
|
||||
Route::get('/api/imports/{importLog}', 'App\Http\Controllers\Api\ImportController@show');
|
||||
});
|
||||
|
||||
// Lookup endpoints — заполняют v-select'ы (NewDealDialog, smart-filters).
|
||||
Route::get('/api/managers', 'App\Http\Controllers\Api\ManagerController@index');
|
||||
@@ -257,6 +275,7 @@ Route::view('/billing', 'welcome');
|
||||
Route::view('/settings', 'welcome');
|
||||
Route::view('/reports', 'welcome');
|
||||
Route::view('/reminders', 'welcome');
|
||||
Route::view('/import', 'welcome'); // Sprint 4 — CSV-импорт исторических лидов §6
|
||||
Route::view('/admin', 'welcome');
|
||||
Route::view('/admin/tenants', 'welcome');
|
||||
Route::view('/admin/billing', 'welcome');
|
||||
|
||||
@@ -5,6 +5,7 @@ declare(strict_types=1);
|
||||
use App\Models\PricingTier;
|
||||
use Database\Seeders\PricingTierSeeder;
|
||||
use Illuminate\Foundation\Testing\DatabaseTransactions;
|
||||
use Illuminate\Support\Carbon;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
uses(DatabaseTransactions::class);
|
||||
@@ -91,6 +92,60 @@ it('DELETE /scheduled/{effective_from} removes future tiers only', function () {
|
||||
expect(PricingTier::where('effective_from', '1970-01-01')->count())->toBe(7);
|
||||
});
|
||||
|
||||
it('store accepts a custom effective_from date', function (): void {
|
||||
$custom = Carbon::now('Europe/Moscow')->addMonths(3)->toDateString();
|
||||
|
||||
$response = $this->postJson('/api/admin/pricing-tiers', [
|
||||
'tiers' => [
|
||||
['tier_no' => 1, 'leads_in_tier' => 50, 'price_rub' => '600.00'],
|
||||
['tier_no' => 2, 'leads_in_tier' => 150, 'price_rub' => '550.00'],
|
||||
['tier_no' => 3, 'leads_in_tier' => 300, 'price_rub' => '500.00'],
|
||||
['tier_no' => 4, 'leads_in_tier' => 700, 'price_rub' => '450.00'],
|
||||
['tier_no' => 5, 'leads_in_tier' => 1500, 'price_rub' => '400.00'],
|
||||
['tier_no' => 6, 'leads_in_tier' => 3000, 'price_rub' => '350.00'],
|
||||
['tier_no' => 7, 'leads_in_tier' => null, 'price_rub' => '300.00'],
|
||||
],
|
||||
'effective_from' => $custom,
|
||||
]);
|
||||
|
||||
$response->assertCreated()->assertJson(['effective_from' => $custom]);
|
||||
expect(PricingTier::where('effective_from', $custom)->count())->toBe(7);
|
||||
});
|
||||
|
||||
it('store rejects effective_from равную сегодня', function (): void {
|
||||
$today = Carbon::now('Europe/Moscow')->toDateString();
|
||||
|
||||
$this->postJson('/api/admin/pricing-tiers', [
|
||||
'tiers' => [
|
||||
['tier_no' => 1, 'leads_in_tier' => 50, 'price_rub' => '600.00'],
|
||||
['tier_no' => 2, 'leads_in_tier' => 150, 'price_rub' => '550.00'],
|
||||
['tier_no' => 3, 'leads_in_tier' => 300, 'price_rub' => '500.00'],
|
||||
['tier_no' => 4, 'leads_in_tier' => 700, 'price_rub' => '450.00'],
|
||||
['tier_no' => 5, 'leads_in_tier' => 1500, 'price_rub' => '400.00'],
|
||||
['tier_no' => 6, 'leads_in_tier' => 3000, 'price_rub' => '350.00'],
|
||||
['tier_no' => 7, 'leads_in_tier' => null, 'price_rub' => '300.00'],
|
||||
],
|
||||
'effective_from' => $today,
|
||||
])->assertStatus(422);
|
||||
});
|
||||
|
||||
it('store rejects effective_from in the past', function (): void {
|
||||
$past = Carbon::now('Europe/Moscow')->subDay()->toDateString();
|
||||
|
||||
$this->postJson('/api/admin/pricing-tiers', [
|
||||
'tiers' => [
|
||||
['tier_no' => 1, 'leads_in_tier' => 50, 'price_rub' => '600.00'],
|
||||
['tier_no' => 2, 'leads_in_tier' => 150, 'price_rub' => '550.00'],
|
||||
['tier_no' => 3, 'leads_in_tier' => 300, 'price_rub' => '500.00'],
|
||||
['tier_no' => 4, 'leads_in_tier' => 700, 'price_rub' => '450.00'],
|
||||
['tier_no' => 5, 'leads_in_tier' => 1500, 'price_rub' => '400.00'],
|
||||
['tier_no' => 6, 'leads_in_tier' => 3000, 'price_rub' => '350.00'],
|
||||
['tier_no' => 7, 'leads_in_tier' => null, 'price_rub' => '300.00'],
|
||||
],
|
||||
'effective_from' => $past,
|
||||
])->assertStatus(422);
|
||||
});
|
||||
|
||||
it('writes audit-trail row in saas_admin_audit_log on POST', function () {
|
||||
$this->postJson('/api/admin/pricing-tiers', ['tiers' => [
|
||||
['tier_no' => 1, 'leads_in_tier' => 50, 'price_rub' => '600.00'],
|
||||
|
||||
@@ -18,11 +18,12 @@ beforeEach(function () {
|
||||
$this->tenant = Tenant::factory()->create([
|
||||
'balance_leads' => 100,
|
||||
]);
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
$this->actingAs($this->user);
|
||||
});
|
||||
|
||||
test('POST /api/deals создаёт сделку с manual source + project firstOrCreate', function () {
|
||||
$r = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'Окна Москва',
|
||||
'phone' => '+7 (999) 123-45-67',
|
||||
'contact_name' => 'Тест Тестов',
|
||||
@@ -57,7 +58,6 @@ test('POST /api/deals использует существующий project (н
|
||||
]);
|
||||
|
||||
$r = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'Натяжные потолки',
|
||||
'phone' => '+7 (999) 000-00-00',
|
||||
]);
|
||||
@@ -74,7 +74,6 @@ test('POST /api/deals использует существующий project (н
|
||||
|
||||
test('POST /api/deals пишет ActivityLog с context.source=manual', function () {
|
||||
$r = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 000-00-00',
|
||||
]);
|
||||
@@ -90,21 +89,20 @@ test('POST /api/deals пишет ActivityLog с context.source=manual', function
|
||||
test('POST /api/deals 422 без обязательных полей', function () {
|
||||
$r = $this->postJson('/api/deals', []);
|
||||
$r->assertStatus(422);
|
||||
expect($r->json('errors'))->toHaveKeys(['tenant_id', 'project_name', 'phone']);
|
||||
expect($r->json('errors'))->toHaveKeys(['project_name', 'phone']);
|
||||
});
|
||||
|
||||
test('POST /api/deals 404 при unknown tenant_id', function () {
|
||||
test('POST /api/deals 401 без auth', function () {
|
||||
auth()->logout();
|
||||
$r = $this->postJson('/api/deals', [
|
||||
'tenant_id' => 999999,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 000-00-00',
|
||||
]);
|
||||
$r->assertStatus(404);
|
||||
$r->assertStatus(401);
|
||||
});
|
||||
|
||||
test('POST /api/deals дефолтный status = new если не передан', function () {
|
||||
$r = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 000-00-00',
|
||||
]);
|
||||
@@ -117,7 +115,6 @@ test('POST /api/deals с manager_id → assigned_at = NOW()', function () {
|
||||
$manager = User::factory()->for($this->tenant)->create(['is_active' => true]);
|
||||
|
||||
$r = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 000-00-00',
|
||||
'manager_id' => $manager->id,
|
||||
@@ -133,7 +130,6 @@ test('POST /api/deals manual НЕ списывает баланс tenant\'а', f
|
||||
$balanceBefore = $this->tenant->balance_leads;
|
||||
|
||||
$this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 000-00-00',
|
||||
])->assertStatus(201);
|
||||
@@ -170,7 +166,6 @@ test('POST /api/deals manual создаёт SupplierLeadCost если у про
|
||||
]);
|
||||
|
||||
$r = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'WithSupplier',
|
||||
'phone' => '+7 (999) 000-00-00',
|
||||
]);
|
||||
@@ -188,7 +183,6 @@ test('POST /api/deals manual создаёт SupplierLeadCost если у про
|
||||
|
||||
test('POST /api/deals manual БЕЗ supplier'."'а у проекта — без SupplierLeadCost (graceful skip)", function () {
|
||||
$r = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'NoSupplier',
|
||||
'phone' => '+7 (999) 000-00-00',
|
||||
]);
|
||||
@@ -204,20 +198,17 @@ test('POST /api/deals manual БЕЗ supplier'."'а у проекта — без
|
||||
test('POST /api/deals/export возвращает CSV с правильными headers + BOM', function () {
|
||||
// Создаём 2 сделки через store endpoint (получаем реальные id).
|
||||
$r1 = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 111-11-11',
|
||||
'contact_name' => 'Алиса',
|
||||
])->json('deal');
|
||||
$r2 = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 222-22-22',
|
||||
'contact_name' => 'Боб',
|
||||
])->json('deal');
|
||||
|
||||
$r = $this->postJson('/api/deals/export', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$r1['id'], $r2['id']],
|
||||
]);
|
||||
|
||||
@@ -239,38 +230,33 @@ test('POST /api/deals/export возвращает CSV с правильными
|
||||
});
|
||||
|
||||
test('POST /api/deals/export 422 без ids', function () {
|
||||
$r = $this->postJson('/api/deals/export', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
]);
|
||||
$r = $this->postJson('/api/deals/export', []);
|
||||
$r->assertStatus(422);
|
||||
expect($r->json('errors'))->toHaveKey('ids');
|
||||
});
|
||||
|
||||
test('POST /api/deals/export 404 unknown tenant', function () {
|
||||
test('POST /api/deals/export 401 без auth', function () {
|
||||
auth()->logout();
|
||||
$r = $this->postJson('/api/deals/export', [
|
||||
'tenant_id' => 999999,
|
||||
'ids' => [1, 2, 3],
|
||||
]);
|
||||
$r->assertStatus(404);
|
||||
$r->assertStatus(401);
|
||||
});
|
||||
|
||||
test('POST /api/deals/export фильтрует только запрошенные ids (своего tenant\'а)', function () {
|
||||
// Создаём 3 сделки одного tenant'а, экспортируем 1 → CSV только её.
|
||||
$a = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 111-11-11',
|
||||
'contact_name' => 'Алиса',
|
||||
])->json('deal');
|
||||
$this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 222-22-22',
|
||||
'contact_name' => 'Боб',
|
||||
])->json('deal');
|
||||
|
||||
$r = $this->postJson('/api/deals/export', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$a['id']],
|
||||
]);
|
||||
$r->assertStatus(200);
|
||||
@@ -286,14 +272,12 @@ test('POST /api/deals/export фильтрует только запрошенн
|
||||
|
||||
test('POST /api/deals/export?format=xlsx возвращает binary с корректным content-type', function () {
|
||||
$a = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 111-11-11',
|
||||
'contact_name' => 'Алиса',
|
||||
])->json('deal');
|
||||
|
||||
$r = $this->postJson('/api/deals/export', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$a['id']],
|
||||
'format' => 'xlsx',
|
||||
]);
|
||||
@@ -310,14 +294,12 @@ test('POST /api/deals/export?format=xlsx возвращает binary с корр
|
||||
|
||||
test('POST /api/deals/export?format=xlsx содержит данные сделки (после распаковки sheet1)', function () {
|
||||
$a = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 333-33-33',
|
||||
'contact_name' => 'Кириллов',
|
||||
])->json('deal');
|
||||
|
||||
$r = $this->postJson('/api/deals/export', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$a['id']],
|
||||
'format' => 'xlsx',
|
||||
]);
|
||||
@@ -348,7 +330,6 @@ test('POST /api/deals/export?format=xlsx содержит данные сдел
|
||||
|
||||
test('POST /api/deals/export 422 на неизвестный format', function () {
|
||||
$r = $this->postJson('/api/deals/export', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [1],
|
||||
'format' => 'pdf',
|
||||
]);
|
||||
@@ -358,14 +339,12 @@ test('POST /api/deals/export 422 на неизвестный format', function (
|
||||
|
||||
test('POST /api/deals/export по умолчанию (без format) возвращает CSV — backward-compat', function () {
|
||||
$a = $this->postJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'project_name' => 'X',
|
||||
'phone' => '+7 (999) 444-44-44',
|
||||
'contact_name' => 'Test',
|
||||
])->json('deal');
|
||||
|
||||
$r = $this->postJson('/api/deals/export', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$a['id']],
|
||||
]);
|
||||
$r->assertStatus(200);
|
||||
|
||||
@@ -6,6 +6,7 @@ use App\Models\ActivityLog;
|
||||
use App\Models\Deal;
|
||||
use App\Models\Project;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use Illuminate\Foundation\Testing\DatabaseTransactions;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
@@ -15,6 +16,9 @@ beforeEach(function () {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->otherTenant = Tenant::factory()->create();
|
||||
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
$this->actingAs($this->user);
|
||||
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$this->project = Project::factory()->for($this->tenant)->create();
|
||||
});
|
||||
@@ -23,19 +27,15 @@ test('DELETE /api/deals 422 без обязательных полей', functio
|
||||
$this->deleteJson('/api/deals', [])->assertStatus(422);
|
||||
});
|
||||
|
||||
test('DELETE /api/deals 404 на unknown tenant', function () {
|
||||
$r = $this->deleteJson('/api/deals', [
|
||||
'tenant_id' => 999999,
|
||||
'ids' => [1],
|
||||
]);
|
||||
$r->assertStatus(404);
|
||||
test('DELETE /api/deals 401 без auth', function () {
|
||||
auth()->logout();
|
||||
$this->deleteJson('/api/deals', ['ids' => [1]])->assertStatus(401);
|
||||
});
|
||||
|
||||
test('DELETE /api/deals soft-удаляет сделки + пишет deal.deleted ActivityLog', function () {
|
||||
$deals = Deal::factory()->count(3)->for($this->tenant)->for($this->project)->create();
|
||||
|
||||
$r = $this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => $deals->pluck('id')->all(),
|
||||
]);
|
||||
|
||||
@@ -65,7 +65,6 @@ test('DELETE /api/deals defense-in-depth не удаляет чужие сдел
|
||||
$foreign = Deal::factory()->for($this->otherTenant)->for($foreignProject)->create();
|
||||
|
||||
$r = $this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$own->id, $foreign->id],
|
||||
]);
|
||||
|
||||
@@ -88,13 +87,11 @@ test('DELETE /api/deals NO-OP на уже удалённых', function () {
|
||||
|
||||
// Первое удаление
|
||||
$this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
])->assertStatus(200)->assertJson(['deleted' => 1]);
|
||||
|
||||
// Повтор — уже удалена, NO-OP.
|
||||
$r = $this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
]);
|
||||
$r->assertStatus(200)->assertJson(['deleted' => 0, 'requested' => 1]);
|
||||
@@ -110,11 +107,10 @@ test('GET /api/deals НЕ возвращает soft-deleted сделки', funct
|
||||
|
||||
// Удаляем одну
|
||||
$this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deleted->id],
|
||||
])->assertStatus(200);
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals');
|
||||
$ids = collect($r->json('deals'))->pluck('id')->all();
|
||||
expect($ids)->toContain($alive->id);
|
||||
expect($ids)->not->toContain($deleted->id);
|
||||
@@ -125,17 +121,15 @@ test('GET /api/deals/{id} 404 для soft-deleted сделки', function () {
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
|
||||
$this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
])->assertStatus(200);
|
||||
|
||||
$this->getJson('/api/deals/'.$deal->id.'?tenant_id='.$this->tenant->id)
|
||||
$this->getJson('/api/deals/'.$deal->id)
|
||||
->assertStatus(404);
|
||||
});
|
||||
|
||||
test('DELETE /api/deals 422 пустой массив ids', function () {
|
||||
$this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [],
|
||||
])->assertStatus(422);
|
||||
});
|
||||
|
||||
@@ -14,7 +14,7 @@ use Illuminate\Support\Facades\DB;
|
||||
*
|
||||
* Покрывает: фильтры (status_in, project_id, manager_id, search), сортировку
|
||||
* по received_at DESC, RLS-изоляцию между tenant'ами, относительные поля
|
||||
* (project_name, manager_name/initials), 422/404, пагинацию (limit/offset).
|
||||
* (project_name, manager_name/initials), 401/404, пагинацию (limit/offset).
|
||||
*/
|
||||
uses(DatabaseTransactions::class);
|
||||
|
||||
@@ -22,6 +22,9 @@ beforeEach(function () {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->otherTenant = Tenant::factory()->create();
|
||||
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
$this->actingAs($this->user);
|
||||
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$this->project = Project::factory()->for($this->tenant)->create(['name' => 'Окна Москва']);
|
||||
$this->project2 = Project::factory()->for($this->tenant)->create(['name' => 'Натяжные потолки']);
|
||||
@@ -33,16 +36,13 @@ beforeEach(function () {
|
||||
]);
|
||||
});
|
||||
|
||||
test('GET /api/deals возвращает 422 без tenant_id', function () {
|
||||
$this->getJson('/api/deals')->assertStatus(422);
|
||||
});
|
||||
|
||||
test('GET /api/deals возвращает 404 для unknown tenant_id', function () {
|
||||
$this->getJson('/api/deals?tenant_id=999999')->assertStatus(404);
|
||||
test('GET /api/deals возвращает 401 без auth', function () {
|
||||
auth()->logout();
|
||||
$this->getJson('/api/deals')->assertStatus(401);
|
||||
});
|
||||
|
||||
test('GET /api/deals возвращает пустой список для tenant без сделок', function () {
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals');
|
||||
|
||||
$r->assertStatus(200)
|
||||
->assertJson(['deals' => [], 'total' => 0, 'limit' => 100, 'offset' => 0]);
|
||||
@@ -59,7 +59,7 @@ test('GET /api/deals возвращает сделки tenant\'а с проек
|
||||
'manager_id' => $this->manager->id,
|
||||
]);
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals');
|
||||
|
||||
$r->assertStatus(200);
|
||||
expect($r->json('total'))->toBe(1);
|
||||
@@ -79,7 +79,7 @@ test('GET /api/deals не возвращает сделки чужого tenant\
|
||||
$foreignProject = Project::factory()->for($this->otherTenant)->create();
|
||||
Deal::factory()->for($this->otherTenant)->for($foreignProject)->create(['status' => 'new']);
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals');
|
||||
|
||||
expect($r->json('total'))->toBe(1);
|
||||
expect($r->json('deals.0.tenant_id'))->toBe($this->tenant->id);
|
||||
@@ -96,7 +96,7 @@ test('GET /api/deals сортирует по received_at DESC', function () {
|
||||
'received_at' => now()->subHours(1),
|
||||
]);
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals');
|
||||
|
||||
expect($r->json('deals.0.id'))->toBe($newest->id);
|
||||
expect($r->json('deals.1.id'))->toBe($middle->id);
|
||||
@@ -108,7 +108,7 @@ test('GET /api/deals фильтрует по status_in[]', function () {
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'paid']);
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'closed']);
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&status_in[]=new&status_in[]=paid');
|
||||
$r = $this->getJson('/api/deals?status_in[]=new&status_in[]=paid');
|
||||
|
||||
expect($r->json('total'))->toBe(2);
|
||||
$statuses = collect($r->json('deals'))->pluck('status')->sort()->values()->all();
|
||||
@@ -120,7 +120,7 @@ test('GET /api/deals фильтрует по project_id', function () {
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
Deal::factory()->for($this->tenant)->for($this->project2)->create();
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&project_id='.$this->project2->id);
|
||||
$r = $this->getJson('/api/deals?project_id='.$this->project2->id);
|
||||
|
||||
expect($r->json('total'))->toBe(1);
|
||||
expect($r->json('deals.0.project_name'))->toBe('Натяжные потолки');
|
||||
@@ -133,7 +133,7 @@ test('GET /api/deals фильтрует по manager_id', function () {
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['manager_id' => $other->id]);
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['manager_id' => null]);
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&manager_id='.$this->manager->id);
|
||||
$r = $this->getJson('/api/deals?manager_id='.$this->manager->id);
|
||||
|
||||
expect($r->json('total'))->toBe(1);
|
||||
expect($r->json('deals.0.manager_id'))->toBe($this->manager->id);
|
||||
@@ -149,13 +149,13 @@ test('GET /api/deals фильтрует по search (phone + contact_name, ILIKE
|
||||
'contact_name' => 'Дмитрий Петров',
|
||||
]);
|
||||
|
||||
expect($this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&search=Соколова')
|
||||
expect($this->getJson('/api/deals?search=Соколова')
|
||||
->json('total'))->toBe(1);
|
||||
|
||||
expect($this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&search=903')
|
||||
expect($this->getJson('/api/deals?search=903')
|
||||
->json('total'))->toBe(1);
|
||||
|
||||
expect($this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&search=сокол') // case-insensitive ILIKE
|
||||
expect($this->getJson('/api/deals?search=сокол') // case-insensitive ILIKE
|
||||
->json('total'))->toBe(1);
|
||||
});
|
||||
|
||||
@@ -166,7 +166,7 @@ test('GET /api/deals поддерживает limit + offset', function () {
|
||||
]);
|
||||
}
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&limit=2&offset=1');
|
||||
$r = $this->getJson('/api/deals?limit=2&offset=1');
|
||||
|
||||
expect($r->json('total'))->toBe(5);
|
||||
expect($r->json('limit'))->toBe(2);
|
||||
@@ -181,7 +181,7 @@ test('GET /api/deals?only_deleted=true возвращает только soft-de
|
||||
$deleted1->delete();
|
||||
$deleted2->delete();
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&only_deleted=true');
|
||||
$r = $this->getJson('/api/deals?only_deleted=true');
|
||||
|
||||
expect($r->json('total'))->toBe(2);
|
||||
$ids = collect($r->json('deals'))->pluck('id')->all();
|
||||
@@ -195,7 +195,7 @@ test('GET /api/deals (без only_deleted) НЕ возвращает soft-delete
|
||||
$deleted = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
$deleted->delete();
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals');
|
||||
|
||||
expect($r->json('total'))->toBe(1);
|
||||
expect($r->json('deals.0.id'))->toBe($alive->id);
|
||||
@@ -211,7 +211,7 @@ test('GET /api/deals?only_deleted=true изолирует чужие удалё
|
||||
$own = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
$own->delete();
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&only_deleted=true');
|
||||
$r = $this->getJson('/api/deals?only_deleted=true');
|
||||
|
||||
expect($r->json('total'))->toBe(1);
|
||||
expect($r->json('deals.0.id'))->toBe($own->id);
|
||||
@@ -220,7 +220,7 @@ test('GET /api/deals?only_deleted=true изолирует чужие удалё
|
||||
test('GET /api/deals возвращает manager_name/initials = null если manager_id null', function () {
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['manager_id' => null]);
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals');
|
||||
|
||||
expect($r->json('deals.0.manager_id'))->toBeNull();
|
||||
expect($r->json('deals.0.manager_name'))->toBeNull();
|
||||
@@ -244,7 +244,7 @@ test('GET /api/deals с cursor возвращает следующую стра
|
||||
}
|
||||
|
||||
// Первая страница без cursor: limit=2 → последние 2 (по received_at DESC).
|
||||
$r1 = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&limit=2');
|
||||
$r1 = $this->getJson('/api/deals?limit=2');
|
||||
$r1->assertStatus(200);
|
||||
expect($r1->json('deals'))->toHaveLength(2);
|
||||
expect($r1->json('deals.0.id'))->toBe($ids[4]);
|
||||
@@ -256,7 +256,7 @@ test('GET /api/deals с cursor возвращает следующую стра
|
||||
'i' => $r1->json('deals.1.id'),
|
||||
]));
|
||||
|
||||
$r2 = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&limit=2&cursor='.$cursor);
|
||||
$r2 = $this->getJson('/api/deals?limit=2&cursor='.$cursor);
|
||||
$r2->assertStatus(200);
|
||||
expect($r2->json('deals'))->toHaveLength(2);
|
||||
expect($r2->json('deals.0.id'))->toBe($ids[2]);
|
||||
@@ -264,7 +264,7 @@ test('GET /api/deals с cursor возвращает следующую стра
|
||||
});
|
||||
|
||||
test('GET /api/deals с невалидным cursor возвращает 422', function () {
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&cursor=not-base64-json');
|
||||
$r = $this->getJson('/api/deals?cursor=not-base64-json');
|
||||
$r->assertStatus(422);
|
||||
expect($r->json('message'))->toBeString();
|
||||
});
|
||||
@@ -278,14 +278,43 @@ test('GET /api/deals возвращает next_cursor когда есть ещё
|
||||
]);
|
||||
}
|
||||
|
||||
$r = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&limit=2');
|
||||
$r = $this->getJson('/api/deals?limit=2');
|
||||
$r->assertStatus(200);
|
||||
expect($r->json('next_cursor'))->toBeString();
|
||||
expect($r->json('next_cursor'))->not->toBeEmpty();
|
||||
|
||||
// Последняя страница: next_cursor = null.
|
||||
$cursor = $r->json('next_cursor');
|
||||
$r2 = $this->getJson('/api/deals?tenant_id='.$this->tenant->id.'&limit=2&cursor='.$cursor);
|
||||
$r2 = $this->getJson('/api/deals?limit=2&cursor='.$cursor);
|
||||
$r2->assertStatus(200);
|
||||
expect($r2->json('next_cursor'))->toBeNull();
|
||||
});
|
||||
|
||||
test('GET /api/deals?count_only=1 возвращает только total без массива deals', function () {
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'new']);
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'paid']);
|
||||
|
||||
$r = $this->getJson('/api/deals?count_only=1');
|
||||
|
||||
$r->assertStatus(200);
|
||||
expect($r->json('total'))->toBe(2);
|
||||
expect($r->json('deals'))->toBeNull();
|
||||
});
|
||||
|
||||
test('GET /api/deals?count_only=1 учитывает фильтры (status_in)', function () {
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'new']);
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'new']);
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'paid']);
|
||||
|
||||
expect($this->getJson('/api/deals?count_only=1&status_in[]=new')->json('total'))->toBe(2);
|
||||
});
|
||||
|
||||
test('GET /api/deals?count_only=1 изолирует чужой tenant (RLS)', function () {
|
||||
Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'new']);
|
||||
|
||||
DB::statement('SET app.current_tenant_id = '.$this->otherTenant->id);
|
||||
$foreignProject = Project::factory()->for($this->otherTenant)->create();
|
||||
Deal::factory()->for($this->otherTenant)->for($foreignProject)->create(['status' => 'new']);
|
||||
|
||||
expect($this->getJson('/api/deals?count_only=1')->json('total'))->toBe(1);
|
||||
});
|
||||
|
||||
@@ -6,6 +6,7 @@ use App\Models\ActivityLog;
|
||||
use App\Models\Deal;
|
||||
use App\Models\Project;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use Illuminate\Foundation\Testing\DatabaseTransactions;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
@@ -15,6 +16,9 @@ beforeEach(function () {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->otherTenant = Tenant::factory()->create();
|
||||
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
$this->actingAs($this->user);
|
||||
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$this->project = Project::factory()->for($this->tenant)->create();
|
||||
});
|
||||
@@ -23,12 +27,9 @@ test('POST /api/deals/restore 422 без обязательных полей', f
|
||||
$this->postJson('/api/deals/restore', [])->assertStatus(422);
|
||||
});
|
||||
|
||||
test('POST /api/deals/restore 404 на unknown tenant', function () {
|
||||
$r = $this->postJson('/api/deals/restore', [
|
||||
'tenant_id' => 999999,
|
||||
'ids' => [1],
|
||||
]);
|
||||
$r->assertStatus(404);
|
||||
test('POST /api/deals/restore 401 без auth', function () {
|
||||
auth()->logout();
|
||||
$this->postJson('/api/deals/restore', ['ids' => [1]])->assertStatus(401);
|
||||
});
|
||||
|
||||
test('POST /api/deals/restore восстанавливает soft-deleted + пишет deal.restored', function () {
|
||||
@@ -36,13 +37,11 @@ test('POST /api/deals/restore восстанавливает soft-deleted + пи
|
||||
|
||||
// Удалим сначала
|
||||
$this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
])->assertStatus(200);
|
||||
|
||||
// Восстановим
|
||||
$r = $this->postJson('/api/deals/restore', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
]);
|
||||
$r->assertStatus(200)->assertJson([
|
||||
@@ -64,7 +63,6 @@ test('POST /api/deals/restore NO-OP для не-удалённых (живых)
|
||||
$alive = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
|
||||
$r = $this->postJson('/api/deals/restore', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$alive->id],
|
||||
]);
|
||||
$r->assertStatus(200)->assertJson([
|
||||
@@ -88,7 +86,6 @@ test('POST /api/deals/restore defense-in-depth не восстанавливае
|
||||
$own->delete();
|
||||
|
||||
$r = $this->postJson('/api/deals/restore', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$own->id, $foreign->id],
|
||||
]);
|
||||
$r->assertStatus(200)->assertJson([
|
||||
@@ -110,26 +107,23 @@ test('POST /api/deals/restore — после restore сделка снова в
|
||||
|
||||
// Удалили
|
||||
$this->deleteJson('/api/deals', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
])->assertStatus(200);
|
||||
|
||||
// GET не возвращает
|
||||
expect($this->getJson('/api/deals?tenant_id='.$this->tenant->id)->json('total'))->toBe(0);
|
||||
expect($this->getJson('/api/deals')->json('total'))->toBe(0);
|
||||
|
||||
// Restore
|
||||
$this->postJson('/api/deals/restore', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
])->assertStatus(200);
|
||||
|
||||
// GET снова возвращает
|
||||
expect($this->getJson('/api/deals?tenant_id='.$this->tenant->id)->json('total'))->toBe(1);
|
||||
expect($this->getJson('/api/deals')->json('total'))->toBe(1);
|
||||
});
|
||||
|
||||
test('POST /api/deals/restore 422 пустой массив ids', function () {
|
||||
$this->postJson('/api/deals/restore', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [],
|
||||
])->assertStatus(422);
|
||||
});
|
||||
|
||||
@@ -20,6 +20,9 @@ beforeEach(function () {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->otherTenant = Tenant::factory()->create();
|
||||
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
$this->actingAs($this->user);
|
||||
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$this->project = Project::factory()->for($this->tenant)->create(['name' => 'Окна Москва']);
|
||||
$this->manager = User::factory()->for($this->tenant)->create([
|
||||
@@ -29,18 +32,14 @@ beforeEach(function () {
|
||||
]);
|
||||
});
|
||||
|
||||
test('GET /api/deals/{id} 422 без tenant_id', function () {
|
||||
test('GET /api/deals/{id} 401 без auth', function () {
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
$this->getJson('/api/deals/'.$deal->id)->assertStatus(422);
|
||||
});
|
||||
|
||||
test('GET /api/deals/{id} 404 для unknown tenant', function () {
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
$this->getJson('/api/deals/'.$deal->id.'?tenant_id=999999')->assertStatus(404);
|
||||
auth()->logout();
|
||||
$this->getJson('/api/deals/'.$deal->id)->assertStatus(401);
|
||||
});
|
||||
|
||||
test('GET /api/deals/{id} 404 если сделка не существует', function () {
|
||||
$this->getJson('/api/deals/999999?tenant_id='.$this->tenant->id)->assertStatus(404);
|
||||
$this->getJson('/api/deals/999999')->assertStatus(404);
|
||||
});
|
||||
|
||||
test('GET /api/deals/{id} 404 если сделка чужого tenant\'а (defense-in-depth)', function () {
|
||||
@@ -48,8 +47,8 @@ test('GET /api/deals/{id} 404 если сделка чужого tenant\'а (def
|
||||
$foreignProject = Project::factory()->for($this->otherTenant)->create();
|
||||
$foreign = Deal::factory()->for($this->otherTenant)->for($foreignProject)->create();
|
||||
|
||||
// Запрашиваем чужую сделку с нашим tenant_id — RLS+app-фильтр скрывают.
|
||||
$this->getJson('/api/deals/'.$foreign->id.'?tenant_id='.$this->tenant->id)
|
||||
// Запрашиваем чужую сделку — RLS+app-фильтр скрывают.
|
||||
$this->getJson('/api/deals/'.$foreign->id)
|
||||
->assertStatus(404);
|
||||
});
|
||||
|
||||
@@ -65,7 +64,7 @@ test('GET /api/deals/{id} возвращает сделку с relations', funct
|
||||
'comment' => 'Заметка менеджера',
|
||||
]);
|
||||
|
||||
$r = $this->getJson('/api/deals/'.$deal->id.'?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals/'.$deal->id);
|
||||
|
||||
$r->assertStatus(200);
|
||||
expect($r->json('deal.id'))->toBe($deal->id);
|
||||
@@ -100,7 +99,7 @@ test('GET /api/deals/{id} возвращает activity events отсортир
|
||||
'created_at' => now()->subMinutes(5),
|
||||
]);
|
||||
|
||||
$r = $this->getJson('/api/deals/'.$deal->id.'?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals/'.$deal->id);
|
||||
|
||||
$r->assertStatus(200);
|
||||
$events = $r->json('events');
|
||||
@@ -137,7 +136,7 @@ test('GET /api/deals/{id} НЕ возвращает чужие activity events (
|
||||
'context' => ['source' => 'webhook'],
|
||||
]);
|
||||
|
||||
$r = $this->getJson('/api/deals/'.$deal->id.'?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals/'.$deal->id);
|
||||
|
||||
$events = $r->json('events');
|
||||
expect($events)->toHaveCount(1);
|
||||
@@ -159,7 +158,7 @@ test('GET /api/deals/{id} лимит 50 событий', function () {
|
||||
]);
|
||||
}
|
||||
|
||||
$r = $this->getJson('/api/deals/'.$deal->id.'?tenant_id='.$this->tenant->id);
|
||||
$r = $this->getJson('/api/deals/'.$deal->id);
|
||||
|
||||
expect($r->json('events'))->toHaveCount(50);
|
||||
});
|
||||
|
||||
@@ -6,6 +6,7 @@ use App\Models\ActivityLog;
|
||||
use App\Models\Deal;
|
||||
use App\Models\Project;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use Illuminate\Foundation\Testing\DatabaseTransactions;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
@@ -14,7 +15,7 @@ use Illuminate\Support\Facades\DB;
|
||||
*
|
||||
* Покрывает: validation (422 на missing/неизвестный slug), RLS+app-фильтр
|
||||
* (чужие сделки НЕ обновляются), ActivityLog event=deal.status_changed,
|
||||
* 404 unknown tenant, NO-OP не пишет audit entry, partial update (несколько id
|
||||
* 401 без auth, NO-OP не пишет audit entry, partial update (несколько id
|
||||
* принадлежат tenant'у, один — нет → updated < requested).
|
||||
*/
|
||||
uses(DatabaseTransactions::class);
|
||||
@@ -23,6 +24,9 @@ beforeEach(function () {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->otherTenant = Tenant::factory()->create();
|
||||
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
$this->actingAs($this->user);
|
||||
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$this->project = Project::factory()->for($this->tenant)->create();
|
||||
});
|
||||
@@ -31,20 +35,15 @@ test('POST /api/deals/transition — 422 без обязательных пол
|
||||
$this->postJson('/api/deals/transition', [])->assertStatus(422);
|
||||
});
|
||||
|
||||
test('POST /api/deals/transition — 404 на unknown tenant', function () {
|
||||
$r = $this->postJson('/api/deals/transition', [
|
||||
'tenant_id' => 999999,
|
||||
'ids' => [1],
|
||||
'status' => 'paid',
|
||||
]);
|
||||
$r->assertStatus(404);
|
||||
test('POST /api/deals/transition — 401 без auth', function () {
|
||||
auth()->logout();
|
||||
$this->postJson('/api/deals/transition', ['ids' => [1], 'status' => 'new'])->assertStatus(401);
|
||||
});
|
||||
|
||||
test('POST /api/deals/transition — 422 на неизвестный status slug', function () {
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'new']);
|
||||
|
||||
$r = $this->postJson('/api/deals/transition', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
'status' => 'not_a_real_slug',
|
||||
]);
|
||||
@@ -61,7 +60,6 @@ test('POST /api/deals/transition — обновляет статус и пише
|
||||
$deals = Deal::factory()->count(3)->for($this->tenant)->for($this->project)->create(['status' => 'new']);
|
||||
|
||||
$r = $this->postJson('/api/deals/transition', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => $deals->pluck('id')->all(),
|
||||
'status' => 'paid',
|
||||
]);
|
||||
@@ -92,7 +90,6 @@ test('POST /api/deals/transition — NO-OP не пишет ActivityLog', functio
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'paid']);
|
||||
|
||||
$r = $this->postJson('/api/deals/transition', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$deal->id],
|
||||
'status' => 'paid',
|
||||
]);
|
||||
@@ -111,9 +108,8 @@ test('POST /api/deals/transition — defense-in-depth не апдейтит чу
|
||||
$foreignProject = Project::factory()->for($this->otherTenant)->create();
|
||||
$foreign = Deal::factory()->for($this->otherTenant)->for($foreignProject)->create(['status' => 'new']);
|
||||
|
||||
// Передаём оба id, но tenant_id указываем наш — чужой не должен обновиться.
|
||||
// Передаём оба id — чужой не должен обновиться.
|
||||
$r = $this->postJson('/api/deals/transition', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [$own->id, $foreign->id],
|
||||
'status' => 'paid',
|
||||
]);
|
||||
@@ -134,7 +130,6 @@ test('POST /api/deals/transition — defense-in-depth не апдейтит чу
|
||||
|
||||
test('POST /api/deals/transition — 422 если ids пустой массив', function () {
|
||||
$this->postJson('/api/deals/transition', [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'ids' => [],
|
||||
'status' => 'paid',
|
||||
])->assertStatus(422);
|
||||
|
||||
@@ -16,22 +16,18 @@ beforeEach(function () {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->otherTenant = Tenant::factory()->create();
|
||||
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
$this->actingAs($this->user);
|
||||
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$this->project = Project::factory()->for($this->tenant)->create();
|
||||
$this->manager = User::factory()->for($this->tenant)->create(['is_active' => true]);
|
||||
});
|
||||
|
||||
test('PATCH /api/deals/{id} 422 без tenant_id', function () {
|
||||
test('PATCH /api/deals/{id} 401 без auth', function () {
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
$this->patchJson('/api/deals/'.$deal->id, [])->assertStatus(422);
|
||||
});
|
||||
|
||||
test('PATCH /api/deals/{id} 404 unknown tenant', function () {
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
$this->patchJson('/api/deals/'.$deal->id, [
|
||||
'tenant_id' => 999999,
|
||||
'comment' => 'X',
|
||||
])->assertStatus(404);
|
||||
auth()->logout();
|
||||
$this->patchJson('/api/deals/'.$deal->id, [])->assertStatus(401);
|
||||
});
|
||||
|
||||
test('PATCH /api/deals/{id} 404 чужая сделка', function () {
|
||||
@@ -40,7 +36,6 @@ test('PATCH /api/deals/{id} 404 чужая сделка', function () {
|
||||
$foreign = Deal::factory()->for($this->otherTenant)->for($foreignProject)->create();
|
||||
|
||||
$this->patchJson('/api/deals/'.$foreign->id, [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'comment' => 'leak',
|
||||
])->assertStatus(404);
|
||||
});
|
||||
@@ -49,7 +44,6 @@ test('PATCH /api/deals/{id} обновляет comment + пишет deal.comment
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create(['comment' => 'old']);
|
||||
|
||||
$r = $this->patchJson('/api/deals/'.$deal->id, [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'comment' => 'Дозвонился, перезвоню после 14:00',
|
||||
]);
|
||||
$r->assertStatus(200);
|
||||
@@ -71,7 +65,6 @@ test('PATCH /api/deals/{id} обновляет manager_id + пишет deal.assi
|
||||
]);
|
||||
|
||||
$r = $this->patchJson('/api/deals/'.$deal->id, [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'manager_id' => $this->manager->id,
|
||||
]);
|
||||
$r->assertStatus(200);
|
||||
@@ -90,7 +83,6 @@ test('PATCH /api/deals/{id} обновляет status + пишет deal.status_c
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create(['status' => 'new']);
|
||||
|
||||
$r = $this->patchJson('/api/deals/'.$deal->id, [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'status' => 'paid',
|
||||
]);
|
||||
$r->assertStatus(200);
|
||||
@@ -108,7 +100,6 @@ test('PATCH /api/deals/{id} 422 на неизвестный status slug', functi
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
|
||||
$r = $this->patchJson('/api/deals/'.$deal->id, [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'status' => 'not_a_real_slug',
|
||||
]);
|
||||
$r->assertStatus(422);
|
||||
@@ -125,7 +116,6 @@ test('PATCH /api/deals/{id} 422 на manager_id чужого tenant\'а', functi
|
||||
$deal = Deal::factory()->for($this->tenant)->for($this->project)->create();
|
||||
|
||||
$r = $this->patchJson('/api/deals/'.$deal->id, [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'manager_id' => $foreignManager->id,
|
||||
]);
|
||||
$r->assertStatus(422);
|
||||
@@ -138,7 +128,6 @@ test('PATCH /api/deals/{id} NO-OP не пишет ActivityLog', function () {
|
||||
]);
|
||||
|
||||
$r = $this->patchJson('/api/deals/'.$deal->id, [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'status' => 'paid', // не меняем
|
||||
'comment' => 'same', // не меняем
|
||||
]);
|
||||
@@ -155,7 +144,6 @@ test('PATCH /api/deals/{id} комбинированно — comment + status о
|
||||
]);
|
||||
|
||||
$r = $this->patchJson('/api/deals/'.$deal->id, [
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'comment' => 'Заметка',
|
||||
'status' => 'worked',
|
||||
]);
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use Database\Seeders\DemoSeeder;
|
||||
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||
|
||||
uses(RefreshDatabase::class);
|
||||
|
||||
it('DemoSeeder идемпотентен — повторный запуск не дублирует demo-tenant и admin', function () {
|
||||
$this->seed(DemoSeeder::class);
|
||||
$this->seed(DemoSeeder::class);
|
||||
|
||||
// tenant + admin покрывают оба create-пути сидера (first()??create / updateOrCreate);
|
||||
// projects/deals используют updateOrInsert + skip-guard — тот же класс идемпотентности.
|
||||
expect(Tenant::query()->where('subdomain', 'demo')->count())->toBe(1)
|
||||
->and(User::query()->where('email', 'admin@demo.local')->count())->toBe(1);
|
||||
});
|
||||
@@ -0,0 +1,186 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use App\Models\Deal;
|
||||
use App\Models\ImportLog;
|
||||
use App\Models\ImportUnknownStatus;
|
||||
use App\Models\Reminder;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use App\Services\Import\CsvLeadsParser;
|
||||
use App\Services\Import\HistoricalImportService;
|
||||
use Illuminate\Foundation\Testing\DatabaseTransactions;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
uses(DatabaseTransactions::class);
|
||||
|
||||
beforeEach(function (): void {
|
||||
$this->tenant = Tenant::factory()->create(['balance_leads' => 5]);
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$this->service = app(HistoricalImportService::class);
|
||||
});
|
||||
|
||||
function importLog(Tenant $tenant, User $user, bool $dryRun = false): ImportLog
|
||||
{
|
||||
return ImportLog::create([
|
||||
'tenant_id' => $tenant->id,
|
||||
'user_id' => $user->id,
|
||||
'filename' => 'leads.csv',
|
||||
'file_path' => 'imports/x.csv',
|
||||
'dry_run' => $dryRun,
|
||||
]);
|
||||
}
|
||||
|
||||
function parseFixture(string $body): array
|
||||
{
|
||||
$header = "\xEF\xBB\xBF".'id,Проект,Тег проекта,Телефон,Создано,Напоминание,Комментарий,Состояние,Имя';
|
||||
|
||||
return (new CsvLeadsParser)->parse($header."\n".$body)->rows;
|
||||
}
|
||||
|
||||
test('импортирует исторические лиды, создавая партиции под старые даты', function (): void {
|
||||
$rows = parseFixture(
|
||||
'5001,Окна,окна,79161112233,2023/07/10 10:00:00,,Комментарий,Переговоры,Иван'
|
||||
);
|
||||
|
||||
$result = $this->service->import($this->tenant->id, $this->user->id, importLog($this->tenant, $this->user), $rows);
|
||||
|
||||
expect($result->added)->toBe(1)
|
||||
->and($result->updated)->toBe(0);
|
||||
|
||||
$deal = Deal::query()->where('source_crm_id', 5001)->firstOrFail();
|
||||
expect($deal->status)->toBe('negotiations')
|
||||
->and($deal->phone)->toBe('79161112233')
|
||||
->and($deal->received_at->format('Y-m-d'))->toBe('2023-07-10');
|
||||
});
|
||||
|
||||
test('баланс лидов не списывается, фиксируется транзакция historical_import', function (): void {
|
||||
$rows = parseFixture(
|
||||
'5002,Окна,окна,79161112234,2023/07/11 10:00:00,,,Новые,'
|
||||
);
|
||||
|
||||
$this->service->import($this->tenant->id, $this->user->id, importLog($this->tenant, $this->user), $rows);
|
||||
|
||||
expect($this->tenant->fresh()->balance_leads)->toBe(5); // не изменился
|
||||
|
||||
$tx = DB::table('balance_transactions')
|
||||
->where('tenant_id', $this->tenant->id)
|
||||
->where('type', 'historical_import')
|
||||
->first();
|
||||
expect($tx)->not->toBeNull()
|
||||
->and((int) $tx->amount_leads)->toBe(0);
|
||||
});
|
||||
|
||||
test('повторный импорт того же файла не создаёт дублей (idempotent UPDATE)', function (): void {
|
||||
$rows = parseFixture(
|
||||
'5003,Окна,окна,79161112235,2023/08/01 10:00:00,,Старый,Новые,'
|
||||
);
|
||||
$this->service->import($this->tenant->id, $this->user->id, importLog($this->tenant, $this->user), $rows);
|
||||
|
||||
$rows2 = parseFixture(
|
||||
'5003,Окна,окна,79161112235,2023/08/01 10:00:00,,Обновлённый,Оплачено,Пётр'
|
||||
);
|
||||
$result = $this->service->import($this->tenant->id, $this->user->id, importLog($this->tenant, $this->user), $rows2);
|
||||
|
||||
expect($result->added)->toBe(0)
|
||||
->and($result->updated)->toBe(1)
|
||||
->and(Deal::query()->where('source_crm_id', 5003)->count())->toBe(1);
|
||||
|
||||
$deal = Deal::query()->where('source_crm_id', 5003)->firstOrFail();
|
||||
expect($deal->status)->toBe('paid') // §6.5 стадия 3a: status перезаписан
|
||||
->and($deal->contact_name)->toBe('Пётр')
|
||||
->and($deal->comment)->toBe('Обновлённый');
|
||||
});
|
||||
|
||||
test('непустое «Напоминание» создаёт строку reminders', function (): void {
|
||||
$rows = parseFixture(
|
||||
'5004,Окна,окна,79161112236,2023/09/01 10:00:00,2023/09/05 14:00:00,,Новые,'
|
||||
);
|
||||
$this->service->import($this->tenant->id, $this->user->id, importLog($this->tenant, $this->user), $rows);
|
||||
|
||||
$deal = Deal::query()->where('source_crm_id', 5004)->firstOrFail();
|
||||
$reminder = Reminder::query()->where('deal_id', $deal->id)->firstOrFail();
|
||||
expect($reminder->remind_at->format('Y-m-d H:i'))->toBe('2023-09-05 14:00')
|
||||
->and($reminder->created_by)->toBe($this->user->id);
|
||||
});
|
||||
|
||||
test('неизвестный статус → сделка new + запись в import_unknown_statuses', function (): void {
|
||||
$log = importLog($this->tenant, $this->user);
|
||||
$rows = parseFixture(
|
||||
"5005,Окна,окна,79161112237,2023/10/01 10:00:00,,,Архив,\n".
|
||||
'5006,Окна,окна,79161112238,2023/10/02 10:00:00,,,Архив,'
|
||||
);
|
||||
$result = $this->service->import($this->tenant->id, $this->user->id, $log, $rows);
|
||||
|
||||
expect($result->unknownStatuses)->toBe(['Архив' => 2])
|
||||
->and(Deal::query()->where('source_crm_id', 5005)->firstOrFail()->status)->toBe('new');
|
||||
|
||||
$unknown = ImportUnknownStatus::query()->where('status_ru', 'Архив')->firstOrFail();
|
||||
expect($unknown->occurrences)->toBe(2)
|
||||
->and($unknown->mapped_to_slug)->toBeNull();
|
||||
});
|
||||
|
||||
test('resolved-маппинг tenant-а применяется к ранее неизвестному статусу', function (): void {
|
||||
ImportUnknownStatus::create([
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'status_ru' => 'Архив',
|
||||
'occurrences' => 1,
|
||||
'mapped_to_slug' => 'closed',
|
||||
'resolved_at' => now(),
|
||||
]);
|
||||
$rows = parseFixture(
|
||||
'5007,Окна,окна,79161112239,2023/11/01 10:00:00,,,Архив,'
|
||||
);
|
||||
$this->service->import($this->tenant->id, $this->user->id, importLog($this->tenant, $this->user), $rows);
|
||||
|
||||
expect(Deal::query()->where('source_crm_id', 5007)->firstOrFail()->status)->toBe('closed');
|
||||
});
|
||||
|
||||
test('dry_run не пишет сделки, но считает проекцию', function (): void {
|
||||
$rows = parseFixture(
|
||||
'5008,Окна,окна,79161112240,2023/12/01 10:00:00,,,Новые,'
|
||||
);
|
||||
$result = $this->service->import($this->tenant->id, $this->user->id, importLog($this->tenant, $this->user, dryRun: true), $rows);
|
||||
|
||||
expect($result->added)->toBe(1)
|
||||
->and(Deal::query()->where('source_crm_id', 5008)->exists())->toBeFalse();
|
||||
});
|
||||
|
||||
test('неизвестные статусы и resolved-маппинг изолированы по тенантам', function (): void {
|
||||
// Тенант B уже резолвил «Архив» → closed и накопил 9 вхождений.
|
||||
$otherTenant = Tenant::factory()->create();
|
||||
ImportUnknownStatus::create([
|
||||
'tenant_id' => $otherTenant->id,
|
||||
'status_ru' => 'Архив',
|
||||
'occurrences' => 9,
|
||||
'mapped_to_slug' => 'closed',
|
||||
'resolved_at' => now(),
|
||||
]);
|
||||
|
||||
// Тенант A (this) импортирует лид со статусом «Архив». Под BYPASSRLS queue
|
||||
// worker'ом без явного where(tenant_id) сервис подхватил бы маппинг тенанта B
|
||||
// и инкрементировал бы его строку — это и проверяется.
|
||||
$rows = parseFixture(
|
||||
'6001,Окна,окна,79161119999,2023/06/01 10:00:00,,,Архив,'
|
||||
);
|
||||
$this->service->import($this->tenant->id, $this->user->id, importLog($this->tenant, $this->user), $rows);
|
||||
|
||||
// Сделка тенанта A — 'new': маппинг тенанта B НЕ применён.
|
||||
expect(Deal::query()->where('source_crm_id', 6001)->firstOrFail()->status)->toBe('new');
|
||||
|
||||
// У тенанта A — собственная запись import_unknown_statuses, occurrences=1.
|
||||
$ownRow = ImportUnknownStatus::query()
|
||||
->where('tenant_id', $this->tenant->id)
|
||||
->where('status_ru', 'Архив')
|
||||
->firstOrFail();
|
||||
expect($ownRow->occurrences)->toBe(1);
|
||||
|
||||
// Строка тенанта B не тронута (occurrences остался 9).
|
||||
$otherRow = ImportUnknownStatus::query()
|
||||
->where('tenant_id', $otherTenant->id)
|
||||
->where('status_ru', 'Архив')
|
||||
->firstOrFail();
|
||||
expect($otherRow->occurrences)->toBe(9);
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use App\Mail\ImportCompletedNotification;
|
||||
use App\Models\ImportLog;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use Illuminate\Foundation\Testing\DatabaseTransactions;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
uses(DatabaseTransactions::class);
|
||||
|
||||
beforeEach(function (): void {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
});
|
||||
|
||||
test('письмо об успешном импорте содержит счётчики', function (): void {
|
||||
$log = ImportLog::factory()->create([
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'user_id' => $this->user->id,
|
||||
'status' => 'done',
|
||||
'rows_added' => 120,
|
||||
'rows_updated' => 8,
|
||||
'rows_skipped' => 2,
|
||||
]);
|
||||
|
||||
$rendered = (new ImportCompletedNotification($log, 'done'))->render();
|
||||
|
||||
expect($rendered)->toContain('120')
|
||||
->and($rendered)->toContain('Импорт завершён');
|
||||
});
|
||||
|
||||
test('письмо о неуспешном импорте сообщает об ошибке', function (): void {
|
||||
$log = ImportLog::factory()->create([
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'user_id' => $this->user->id,
|
||||
'status' => 'failed',
|
||||
'error_message' => 'Файл повреждён',
|
||||
]);
|
||||
|
||||
$mailable = new ImportCompletedNotification($log, 'failed');
|
||||
$rendered = $mailable->render();
|
||||
|
||||
expect($rendered)->toContain('Файл повреждён')
|
||||
->and($mailable->envelope()->subject)->toContain('не удался');
|
||||
});
|
||||
@@ -0,0 +1,142 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use App\Jobs\ImportLeadsJob;
|
||||
use App\Models\ImportLog;
|
||||
use App\Models\ImportUnknownStatus;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use Illuminate\Foundation\Testing\DatabaseTransactions;
|
||||
use Illuminate\Http\UploadedFile;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Facades\Queue;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
|
||||
uses(DatabaseTransactions::class);
|
||||
|
||||
beforeEach(function (): void {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
// Устанавливаем контекст тенанта на уровне outer-транзакции DatabaseTransactions.
|
||||
// Middleware SetTenantContext использует SET LOCAL внутри savepoint'а — без этой
|
||||
// строки RLS-фильтрация активна только внутри HTTP-запроса, но прямые DB-запросы
|
||||
// в тестах (count, factory) видят все тенанты. Паттерн из DealIndexTest.php.
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$this->actingAs($this->user);
|
||||
});
|
||||
|
||||
test('POST /api/imports принимает CSV, создаёт import_log, диспатчит job', function (): void {
|
||||
Queue::fake();
|
||||
Storage::fake('local');
|
||||
|
||||
$csv = "\xEF\xBB\xBF".'id,Проект,Тег проекта,Телефон,Создано,Напоминание,Комментарий,Состояние,Имя'."\n".
|
||||
'9001,Окна,окна,79161112233,2023/05/10 10:00:00,,,Новые,';
|
||||
|
||||
$response = $this->postJson('/api/imports', [
|
||||
'file' => UploadedFile::fake()->createWithContent('leads.csv', $csv),
|
||||
]);
|
||||
|
||||
$response->assertStatus(201)
|
||||
->assertJsonPath('data.status', 'pending')
|
||||
->assertJsonPath('data.filename', 'leads.csv');
|
||||
|
||||
Queue::assertPushed(ImportLeadsJob::class);
|
||||
// Defense-in-depth: superuser на dev обходит RLS (BYPASSRLS), поэтому явно
|
||||
// фильтруем по tenant_id — паттерн из DealIndexTest / DealController.
|
||||
expect(ImportLog::query()->where('tenant_id', $this->tenant->id)->count())->toBe(1);
|
||||
});
|
||||
|
||||
test('POST /api/imports отвергает не-CSV файл', function (): void {
|
||||
Storage::fake('local');
|
||||
|
||||
$response = $this->postJson('/api/imports', [
|
||||
'file' => UploadedFile::fake()->create('image.png', 10, 'image/png'),
|
||||
]);
|
||||
|
||||
$response->assertStatus(422)->assertJsonValidationErrorFor('file');
|
||||
});
|
||||
|
||||
test('POST /api/imports требует авторизации', function (): void {
|
||||
app('auth')->forgetGuards();
|
||||
|
||||
$this->postJson('/api/imports', [])->assertStatus(401);
|
||||
});
|
||||
|
||||
test('GET /api/imports возвращает только import_log своего тенанта', function (): void {
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
ImportLog::factory()->count(2)->create([
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'user_id' => $this->user->id,
|
||||
]);
|
||||
|
||||
$this->getJson('/api/imports')
|
||||
->assertStatus(200)
|
||||
->assertJsonCount(2, 'data');
|
||||
});
|
||||
|
||||
test('GET /api/imports/{id} отдаёт прогресс', function (): void {
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$log = ImportLog::factory()->create([
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'user_id' => $this->user->id,
|
||||
'status' => 'processing',
|
||||
'rows_added' => 10,
|
||||
]);
|
||||
|
||||
$this->getJson("/api/imports/{$log->id}")
|
||||
->assertStatus(200)
|
||||
->assertJsonPath('data.status', 'processing')
|
||||
->assertJsonPath('data.rows_added', 10);
|
||||
});
|
||||
|
||||
test('GET /api/imports/unknown-statuses возвращает незамапленные статусы', function (): void {
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
ImportUnknownStatus::create([
|
||||
'tenant_id' => $this->tenant->id, 'status_ru' => 'Архив', 'occurrences' => 3,
|
||||
]);
|
||||
ImportUnknownStatus::create([
|
||||
'tenant_id' => $this->tenant->id, 'status_ru' => 'Спам', 'occurrences' => 1,
|
||||
'mapped_to_slug' => 'closed', 'resolved_at' => now(),
|
||||
]);
|
||||
|
||||
$this->getJson('/api/imports/unknown-statuses')
|
||||
->assertStatus(200)
|
||||
->assertJsonCount(1, 'data')
|
||||
->assertJsonPath('data.0.status_ru', 'Архив');
|
||||
});
|
||||
|
||||
test('POST /api/imports/unknown-statuses/resolve проставляет маппинг', function (): void {
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
$unknown = ImportUnknownStatus::create([
|
||||
'tenant_id' => $this->tenant->id, 'status_ru' => 'Архив', 'occurrences' => 3,
|
||||
]);
|
||||
|
||||
$this->postJson('/api/imports/unknown-statuses/resolve', [
|
||||
'mappings' => [['status_ru' => 'Архив', 'slug' => 'closed']],
|
||||
])->assertStatus(200);
|
||||
|
||||
expect($unknown->refresh()->mapped_to_slug)->toBe('closed')
|
||||
->and($unknown->resolved_at)->not->toBeNull();
|
||||
});
|
||||
|
||||
test('resolve отвергает несуществующий slug', function (): void {
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
|
||||
$this->postJson('/api/imports/unknown-statuses/resolve', [
|
||||
'mappings' => [['status_ru' => 'Архив', 'slug' => 'нет-такого']],
|
||||
])->assertStatus(422);
|
||||
});
|
||||
|
||||
test('GET /api/imports/{id} отвергает import_log чужого тенанта (403)', function (): void {
|
||||
$otherTenant = Tenant::factory()->create();
|
||||
$otherUser = User::factory()->for($otherTenant)->create();
|
||||
$foreignLog = ImportLog::factory()->create([
|
||||
'tenant_id' => $otherTenant->id,
|
||||
'user_id' => $otherUser->id,
|
||||
]);
|
||||
|
||||
// Авторизован пользователь $this->tenant; запрашиваем чужой import_log.
|
||||
// abort_if(tenant_id mismatch, 403) в ImportController::show — defense-in-depth.
|
||||
$this->getJson("/api/imports/{$foreignLog->id}")->assertStatus(403);
|
||||
});
|
||||
@@ -0,0 +1,102 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use App\Jobs\ImportLeadsJob;
|
||||
use App\Mail\ImportCompletedNotification;
|
||||
use App\Models\Deal;
|
||||
use App\Models\ImportLog;
|
||||
use App\Models\Tenant;
|
||||
use App\Models\User;
|
||||
use App\Services\Import\CsvLeadsParser;
|
||||
use App\Services\Import\HistoricalImportService;
|
||||
use Illuminate\Foundation\Testing\DatabaseTransactions;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Facades\Mail;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
|
||||
uses(DatabaseTransactions::class);
|
||||
|
||||
beforeEach(function (): void {
|
||||
$this->tenant = Tenant::factory()->create();
|
||||
$this->user = User::factory()->for($this->tenant)->create();
|
||||
DB::statement('SET app.current_tenant_id = '.$this->tenant->id);
|
||||
Mail::fake();
|
||||
Storage::fake('local');
|
||||
});
|
||||
|
||||
function storedCsv(int $tenantId, string $body): string
|
||||
{
|
||||
$header = "\xEF\xBB\xBF".'id,Проект,Тег проекта,Телефон,Создано,Напоминание,Комментарий,Состояние,Имя';
|
||||
$path = "imports/{$tenantId}/test.csv";
|
||||
Storage::disk('local')->put($path, $header."\n".$body);
|
||||
|
||||
return $path;
|
||||
}
|
||||
|
||||
function runImportJob(int $logId, int $tenantId): void
|
||||
{
|
||||
(new ImportLeadsJob($logId, $tenantId))->handle(
|
||||
app(HistoricalImportService::class),
|
||||
app(CsvLeadsParser::class),
|
||||
);
|
||||
}
|
||||
|
||||
test('job импортирует лиды и переводит import_log в done', function (): void {
|
||||
$path = storedCsv($this->tenant->id,
|
||||
'7001,Окна,окна,79161112233,2023/05/10 10:00:00,,,Новые,Иван'
|
||||
);
|
||||
$log = ImportLog::create([
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'user_id' => $this->user->id,
|
||||
'filename' => 'leads.csv',
|
||||
'file_path' => $path,
|
||||
'status' => 'pending',
|
||||
]);
|
||||
|
||||
runImportJob($log->id, $this->tenant->id);
|
||||
|
||||
$log->refresh();
|
||||
expect($log->status)->toBe('done')
|
||||
->and($log->rows_added)->toBe(1)
|
||||
->and($log->finished_at)->not->toBeNull()
|
||||
->and(Deal::query()->where('source_crm_id', 7001)->exists())->toBeTrue();
|
||||
|
||||
Mail::assertSent(ImportCompletedNotification::class);
|
||||
});
|
||||
|
||||
test('job переводит import_log в failed при отсутствии файла', function (): void {
|
||||
$log = ImportLog::create([
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'user_id' => $this->user->id,
|
||||
'filename' => 'leads.csv',
|
||||
'file_path' => 'imports/missing.csv',
|
||||
'status' => 'pending',
|
||||
]);
|
||||
|
||||
runImportJob($log->id, $this->tenant->id);
|
||||
|
||||
expect($log->refresh()->status)->toBe('failed')
|
||||
->and($log->error_message)->not->toBeNull();
|
||||
});
|
||||
|
||||
test('job пишет unknown_statuses_count и rows_skipped', function (): void {
|
||||
$path = storedCsv($this->tenant->id,
|
||||
"7002,Окна,окна,79161112234,2023/05/11 10:00:00,,,Архив,\n".
|
||||
'7003,Окна,окна,BADPHONE,2023/05/12 10:00:00,,,Новые,'
|
||||
);
|
||||
$log = ImportLog::create([
|
||||
'tenant_id' => $this->tenant->id,
|
||||
'user_id' => $this->user->id,
|
||||
'filename' => 'leads.csv',
|
||||
'file_path' => $path,
|
||||
'status' => 'pending',
|
||||
]);
|
||||
|
||||
runImportJob($log->id, $this->tenant->id);
|
||||
|
||||
$log->refresh();
|
||||
expect($log->status)->toBe('done')
|
||||
->and($log->unknown_statuses_count)->toBe(1) // «Архив»
|
||||
->and($log->rows_skipped)->toBe(1); // битый телефон
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user