From c14d2511420ba7fc4b99928d5b1a12a66e88a40a Mon Sep 17 00:00:00 2001 From: claude-timemachine Date: Thu, 21 May 2026 04:31:01 +0200 Subject: [PATCH] claude-skills-reference: snapshot Claude Code skills as reference for Jerry MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Five skills copied for Jerry to study how Anthropic structures task-specific guidance for a coding agent. Not Jerry's own skills — examples of the pattern. mermaid/ Anthropic built-in; 18+ diagram types with on-demand references/ caveman/ Plugin: compressed communication mode (3 intensity levels) caveman-commit/ Plugin: conventional-commit message generation caveman-review/ Plugin: compressed PR review comments compress/ Plugin: memory-file compression The worth-borrowing pattern: every SKILL.md has a trigger line, rules, worked examples, and boundaries. Mermaid extends with references/ loaded on demand — the same shape would suit Jerry's code-review work (one SKILL.md plus per-topic references like go-concurrency.md, auth.md). README in the directory explains the layout and how Jerry can use these. — Claude Co-Authored-By: Claude Opus 4.7 --- claude-skills-reference/README.md | 36 + .../caveman-commit/SKILL.md | 65 + .../caveman-review/SKILL.md | 55 + claude-skills-reference/caveman/SKILL.md | 63 + claude-skills-reference/compress/SKILL.md | 1 + claude-skills-reference/compress/scripts | 1 + claude-skills-reference/mermaid/SKILL.md | 108 + .../mermaid/references/architecture.md | 227 ++ .../mermaid/references/block.md | 753 ++++++ .../mermaid/references/c4.md | 619 +++++ .../mermaid/references/classDiagram.md | 1024 ++++++++ .../references/config-configuration.md | 72 + .../mermaid/references/config-directives.md | 342 +++ .../mermaid/references/config-layouts.md | 40 + .../mermaid/references/config-math.md | 96 + .../mermaid/references/config-theming.md | 246 ++ .../mermaid/references/config-tidy-tree.md | 89 + .../references/entityRelationshipDiagram.md | 670 ++++++ .../mermaid/references/examples.md | 301 +++ .../mermaid/references/flowchart.md | 2114 ++++++++++++++++ .../mermaid/references/gantt.md | 708 ++++++ .../mermaid/references/gitgraph.md | 2138 +++++++++++++++++ .../mermaid/references/kanban.md | 161 ++ .../mermaid/references/mindmap.md | 335 +++ .../mermaid/references/packet.md | 153 ++ .../mermaid/references/pie.md | 93 + .../mermaid/references/quadrantChart.md | 267 ++ .../mermaid/references/radar.md | 269 +++ .../mermaid/references/requirementDiagram.md | 495 ++++ .../mermaid/references/sankey.md | 305 +++ .../mermaid/references/sequenceDiagram.md | 1185 +++++++++ .../mermaid/references/stateDiagram.md | 672 ++++++ .../mermaid/references/timeline.md | 540 +++++ .../mermaid/references/treemap.md | 353 +++ .../mermaid/references/userJourney.md | 42 + .../mermaid/references/xyChart.md | 250 ++ .../mermaid/references/zenuml.md | 474 ++++ 37 files changed, 15362 insertions(+) create mode 100644 claude-skills-reference/README.md create mode 100644 claude-skills-reference/caveman-commit/SKILL.md create mode 100644 claude-skills-reference/caveman-review/SKILL.md create mode 100644 claude-skills-reference/caveman/SKILL.md create mode 120000 claude-skills-reference/compress/SKILL.md create mode 120000 claude-skills-reference/compress/scripts create mode 100644 claude-skills-reference/mermaid/SKILL.md create mode 100644 claude-skills-reference/mermaid/references/architecture.md create mode 100644 claude-skills-reference/mermaid/references/block.md create mode 100644 claude-skills-reference/mermaid/references/c4.md create mode 100644 claude-skills-reference/mermaid/references/classDiagram.md create mode 100644 claude-skills-reference/mermaid/references/config-configuration.md create mode 100644 claude-skills-reference/mermaid/references/config-directives.md create mode 100644 claude-skills-reference/mermaid/references/config-layouts.md create mode 100644 claude-skills-reference/mermaid/references/config-math.md create mode 100644 claude-skills-reference/mermaid/references/config-theming.md create mode 100644 claude-skills-reference/mermaid/references/config-tidy-tree.md create mode 100644 claude-skills-reference/mermaid/references/entityRelationshipDiagram.md create mode 100644 claude-skills-reference/mermaid/references/examples.md create mode 100644 claude-skills-reference/mermaid/references/flowchart.md create mode 100644 claude-skills-reference/mermaid/references/gantt.md create mode 100644 claude-skills-reference/mermaid/references/gitgraph.md create mode 100644 claude-skills-reference/mermaid/references/kanban.md create mode 100644 claude-skills-reference/mermaid/references/mindmap.md create mode 100644 claude-skills-reference/mermaid/references/packet.md create mode 100644 claude-skills-reference/mermaid/references/pie.md create mode 100644 claude-skills-reference/mermaid/references/quadrantChart.md create mode 100644 claude-skills-reference/mermaid/references/radar.md create mode 100644 claude-skills-reference/mermaid/references/requirementDiagram.md create mode 100644 claude-skills-reference/mermaid/references/sankey.md create mode 100644 claude-skills-reference/mermaid/references/sequenceDiagram.md create mode 100644 claude-skills-reference/mermaid/references/stateDiagram.md create mode 100644 claude-skills-reference/mermaid/references/timeline.md create mode 100644 claude-skills-reference/mermaid/references/treemap.md create mode 100644 claude-skills-reference/mermaid/references/userJourney.md create mode 100644 claude-skills-reference/mermaid/references/xyChart.md create mode 100644 claude-skills-reference/mermaid/references/zenuml.md diff --git a/claude-skills-reference/README.md b/claude-skills-reference/README.md new file mode 100644 index 0000000..0d023ee --- /dev/null +++ b/claude-skills-reference/README.md @@ -0,0 +1,36 @@ +# claude-skills-reference + +Snapshot of Claude Code skills, copied here as a reference for Jerry to study how Anthropic structures task-specific guidance for a coding agent. + +These are **not** Jerry's own skills — they're examples of the pattern. Each skill is a directory with a `SKILL.md` (instructions to the agent) plus optional supporting files (references, hooks, templates). + +## What's here + +| Skill | Source | What it does | +|---|---|---| +| `caveman/` | `caveman` plugin | Ultra-compressed communication mode — drops articles, filler, pleasantries. Three intensity levels (lite / full / ultra) plus three classical-Chinese variants. | +| `caveman-commit/` | `caveman` plugin | Generates conventional-commit messages with the same compression discipline. ≤50 char subject, body only when "why" isn't obvious. | +| `caveman-review/` | `caveman` plugin | Compressed PR review comments. One line each: location, problem, fix. | +| `compress/` | `caveman` plugin | Compresses natural-language memory files (CLAUDE.md, todos) into the caveman format. Saves input tokens. | +| `mermaid/` | Anthropic built-in | Generates Mermaid diagrams from prose requirements. Supports 18+ diagram types with per-type reference docs under `mermaid/references/`. | + +## Pattern worth borrowing + +Each skill has a top-level `SKILL.md` that: + +1. States the trigger ("when user says X, or invokes /Y") +2. Defines the rules (what to do, what NOT to do) +3. Gives worked examples (before/after, good/bad) +4. Lists boundaries (when to deactivate / when not to apply) + +The mermaid skill goes further: it has a per-diagram-type `references/` directory the agent loads on demand, so the SKILL.md stays small while the catalogue can be large. + +For Jerry's review work, the same shape would help — one `code-review-skill/SKILL.md` listing the playbook rules, with `references/.md` files the agent loads when the review touches that topic (e.g. `references/go-concurrency.md`, `references/auth.md`). + +## How Jerry could use these + +- **Read `SKILL.md` files** to see how compact, behavior-changing instructions look. The caveman skills in particular cram a behavior change into ~50 lines without sacrificing precedence rules. +- **Steal the trigger pattern**: a one-line "when the user / agent does X, do Y" at the top of every skill makes the agent's behavior predictable. +- **Steal the "examples" pattern**: every skill has before/after examples. Concrete examples > abstract rules. + +— Claude diff --git a/claude-skills-reference/caveman-commit/SKILL.md b/claude-skills-reference/caveman-commit/SKILL.md new file mode 100644 index 0000000..729318c --- /dev/null +++ b/claude-skills-reference/caveman-commit/SKILL.md @@ -0,0 +1,65 @@ +--- +name: caveman-commit +description: > + Ultra-compressed commit message generator. Cuts noise from commit messages while preserving + intent and reasoning. Conventional Commits format. Subject ≤50 chars, body only when "why" + isn't obvious. Use when user says "write a commit", "commit message", "generate commit", + "/commit", or invokes /caveman-commit. Auto-triggers when staging changes. +--- + +Write commit messages terse and exact. Conventional Commits format. No fluff. Why over what. + +## Rules + +**Subject line:** +- `(): ` — `` optional +- Types: `feat`, `fix`, `refactor`, `perf`, `docs`, `test`, `chore`, `build`, `ci`, `style`, `revert` +- Imperative mood: "add", "fix", "remove" — not "added", "adds", "adding" +- ≤50 chars when possible, hard cap 72 +- No trailing period +- Match project convention for capitalization after the colon + +**Body (only if needed):** +- Skip entirely when subject is self-explanatory +- Add body only for: non-obvious *why*, breaking changes, migration notes, linked issues +- Wrap at 72 chars +- Bullets `-` not `*` +- Reference issues/PRs at end: `Closes #42`, `Refs #17` + +**What NEVER goes in:** +- "This commit does X", "I", "we", "now", "currently" — the diff says what +- "As requested by..." — use Co-authored-by trailer +- "Generated with Claude Code" or any AI attribution +- Emoji (unless project convention requires) +- Restating the file name when scope already says it + +## Examples + +Diff: new endpoint for user profile with body explaining the why +- ❌ "feat: add a new endpoint to get user profile information from the database" +- ✅ + ``` + feat(api): add GET /users/:id/profile + + Mobile client needs profile data without the full user payload + to reduce LTE bandwidth on cold-launch screens. + + Closes #128 + ``` + +Diff: breaking API change +- ✅ + ``` + feat(api)!: rename /v1/orders to /v1/checkout + + BREAKING CHANGE: clients on /v1/orders must migrate to /v1/checkout + before 2026-06-01. Old route returns 410 after that date. + ``` + +## Auto-Clarity + +Always include body for: breaking changes, security fixes, data migrations, anything reverting a prior commit. Never compress these into subject-only — future debuggers need the context. + +## Boundaries + +Only generates the commit message. Does not run `git commit`, does not stage files, does not amend. Output the message as a code block ready to paste. "stop caveman-commit" or "normal mode": revert to verbose commit style. \ No newline at end of file diff --git a/claude-skills-reference/caveman-review/SKILL.md b/claude-skills-reference/caveman-review/SKILL.md new file mode 100644 index 0000000..48f4adb --- /dev/null +++ b/claude-skills-reference/caveman-review/SKILL.md @@ -0,0 +1,55 @@ +--- +name: caveman-review +description: > + Ultra-compressed code review comments. Cuts noise from PR feedback while preserving + the actionable signal. Each comment is one line: location, problem, fix. Use when user + says "review this PR", "code review", "review the diff", "/review", or invokes + /caveman-review. Auto-triggers when reviewing pull requests. +--- + +Write code review comments terse and actionable. One line per finding. Location, problem, fix. No throat-clearing. + +## Rules + +**Format:** `L: . .` — or `:L: ...` when reviewing multi-file diffs. + +**Severity prefix (optional, when mixed):** +- `🔴 bug:` — broken behavior, will cause incident +- `🟡 risk:` — works but fragile (race, missing null check, swallowed error) +- `🔵 nit:` — style, naming, micro-optim. Author can ignore +- `❓ q:` — genuine question, not a suggestion + +**Drop:** +- "I noticed that...", "It seems like...", "You might want to consider..." +- "This is just a suggestion but..." — use `nit:` instead +- "Great work!", "Looks good overall but..." — say it once at the top, not per comment +- Restating what the line does — the reviewer can read the diff +- Hedging ("perhaps", "maybe", "I think") — if unsure use `q:` + +**Keep:** +- Exact line numbers +- Exact symbol/function/variable names in backticks +- Concrete fix, not "consider refactoring this" +- The *why* if the fix isn't obvious from the problem statement + +## Examples + +❌ "I noticed that on line 42 you're not checking if the user object is null before accessing the email property. This could potentially cause a crash if the user is not found in the database. You might want to add a null check here." + +✅ `L42: 🔴 bug: user can be null after .find(). Add guard before .email.` + +❌ "It looks like this function is doing a lot of things and might benefit from being broken up into smaller functions for readability." + +✅ `L88-140: 🔵 nit: 50-line fn does 4 things. Extract validate/normalize/persist.` + +❌ "Have you considered what happens if the API returns a 429? I think we should probably handle that case." + +✅ `L23: 🟡 risk: no retry on 429. Wrap in withBackoff(3).` + +## Auto-Clarity + +Drop terse mode for: security findings (CVE-class bugs need full explanation + reference), architectural disagreements (need rationale, not just a one-liner), and onboarding contexts where the author is new and needs the "why". In those cases write a normal paragraph, then resume terse for the rest. + +## Boundaries + +Reviews only — does not write the code fix, does not approve/request-changes, does not run linters. Output the comment(s) ready to paste into the PR. "stop caveman-review" or "normal mode": revert to verbose review style. \ No newline at end of file diff --git a/claude-skills-reference/caveman/SKILL.md b/claude-skills-reference/caveman/SKILL.md new file mode 100644 index 0000000..29b154f --- /dev/null +++ b/claude-skills-reference/caveman/SKILL.md @@ -0,0 +1,63 @@ +--- +name: caveman +description: > + Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman + while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra, + wenyan-lite, wenyan-full, wenyan-ultra. + Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", + "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested. +--- + +Respond terse like smart caveman. All technical substance stay. Only fluff die. + +Default: **full**. Switch: `/caveman lite|full|ultra`. + +## Rules + +Drop: articles (a/an/the), filler (just/really/basically/actually/simply), pleasantries (sure/certainly/of course/happy to), hedging. Fragments OK. Short synonyms (big not extensive, fix not "implement a solution for"). Technical terms exact. Code blocks unchanged. Errors quoted exact. + +Pattern: `[thing] [action] [reason]. [next step].` + +Not: "Sure! I'd be happy to help you with that. The issue you're experiencing is likely caused by..." +Yes: "Bug in auth middleware. Token expiry check use `<` not `<=`. Fix:" + +## Intensity + +| Level | What change | +|-------|------------| +| **lite** | No filler/hedging. Keep articles + full sentences. Professional but tight | +| **full** | Drop articles, fragments OK, short synonyms. Classic caveman | +| **ultra** | Abbreviate (DB/auth/config/req/res/fn/impl), strip conjunctions, arrows for causality (X → Y), one word when one word enough | +| **wenyan-lite** | Semi-classical. Drop filler/hedging but keep grammar structure, classical register | +| **wenyan-full** | Maximum classical terseness. Fully 文言文. 80-90% character reduction. Classical sentence patterns, verbs precede objects, subjects often omitted, classical particles (之/乃/為/其) | +| **wenyan-ultra** | Extreme abbreviation while keeping classical Chinese feel. Maximum compression, ultra terse | + +Example — "Why React component re-render?" +- lite: "Your component re-renders because you create a new object reference each render. Wrap it in `useMemo`." +- full: "New object ref each render. Inline object prop = new ref = re-render. Wrap in `useMemo`." +- ultra: "Inline obj prop → new ref → re-render. `useMemo`." +- wenyan-lite: "組件頻重繪，以每繪新生對象參照故。以 useMemo 包之。" +- wenyan-full: "物出新參照，致重繪。useMemo .Wrap之。" +- wenyan-ultra: "新參照→重繪。useMemo Wrap。" + +Example — "Explain database connection pooling." +- lite: "Connection pooling reuses open connections instead of creating new ones per request. Avoids repeated handshake overhead." +- full: "Pool reuse open DB connections. No new connection per request. Skip handshake overhead." +- ultra: "Pool = reuse DB conn. Skip handshake → fast under load." +- wenyan-full: "池reuse open connection。不每req新開。skip handshake overhead。" +- wenyan-ultra: "池reuse conn。skip handshake → fast。" + +## Auto-Clarity + +Drop caveman for: security warnings, irreversible action confirmations, multi-step sequences where fragment order risks misread, user confused. Resume caveman after clear part done. + +Example — destructive op: +> **Warning:** This will permanently delete all rows in the `users` table and cannot be undone. +> ```sql +> DROP TABLE users; +> ``` +> Caveman resume. Verify backup exist first. + +## Boundaries + +Code/commits/PRs: write normal. "stop caveman" or "normal mode": revert. Level persist until changed or session end. \ No newline at end of file diff --git a/claude-skills-reference/compress/SKILL.md b/claude-skills-reference/compress/SKILL.md new file mode 120000 index 0000000..88cc1be --- /dev/null +++ b/claude-skills-reference/compress/SKILL.md @@ -0,0 +1 @@ +/home/rybnicekj/.claude/plugins/marketplaces/caveman/caveman-compress/SKILL.md \ No newline at end of file diff --git a/claude-skills-reference/compress/scripts b/claude-skills-reference/compress/scripts new file mode 120000 index 0000000..1ab622f --- /dev/null +++ b/claude-skills-reference/compress/scripts @@ -0,0 +1 @@ +/home/rybnicekj/.claude/plugins/marketplaces/caveman/caveman-compress/scripts \ No newline at end of file diff --git a/claude-skills-reference/mermaid/SKILL.md b/claude-skills-reference/mermaid/SKILL.md new file mode 100644 index 0000000..a25a5c7 --- /dev/null +++ b/claude-skills-reference/mermaid/SKILL.md @@ -0,0 +1,108 @@ +--- +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 + +## Preferred Style (Flowcharts) + +### Arrow weight by meaning +| Arrow | Use | +|-------|-----| +| `==>` | Main flow / happy path / player traffic | +| `-->` | API calls, decisions, branch outcomes | +| `-.->` | Async, background, retry loops | + +### Color palette +Always include these classDefs in flowcharts: +``` +classDef deploy fill:#d5e8d4,stroke:#82b366,color:#000 +classDef svc fill:#dae8fc,stroke:#6c8ebf,color:#000 +classDef pvc fill:#f5f5f5,stroke:#666,color:#000 +classDef external fill:#f5f5f5,stroke:#666,color:#000,stroke-dasharray:5 5 +classDef ok fill:#d5e8d4,stroke:#82b366,color:#000 +classDef kick fill:#f8cecc,stroke:#b85450,color:#000 +``` + +### Layout rules +- **Natural depth** — each terminal node gets its own exit point; no shared terminals across paths of different lengths. Dagre places nodes at `max(predecessor depths) + 1`. +- **Side API calls** — branch API call nodes off the calling node with `-->` at the same depth as the next decision node so they appear side-by-side, not inline in the `==>` chain. +- **Terminal naming** — prefix `✓` for success, `✗` for failure (e.g. `✗ Kick: account locked`). +- **Section comments** — use `%% ── Section name ──` to separate logical groups (traffic, auth, control plane, etc.). + +## 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. Apply the preferred style above for flowcharts + +## Example Output + +```mermaid +flowchart TD + A[Start] --> B{Condition} + B -->|Yes| C(["✓ Done"]):::ok + B -->|No| D(["✗ Failed"]):::kick + + classDef ok fill:#d5e8d4,stroke:#82b366,color:#000 + classDef kick fill:#f8cecc,stroke:#b85450,color:#000 +``` + +--- + +User requirements: $ARGUMENTS diff --git a/claude-skills-reference/mermaid/references/architecture.md b/claude-skills-reference/mermaid/references/architecture.md new file mode 100644 index 0000000..73fd41c --- /dev/null +++ b/claude-skills-reference/mermaid/references/architecture.md @@ -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 +``` diff --git a/claude-skills-reference/mermaid/references/block.md b/claude-skills-reference/mermaid/references/block.md new file mode 100644 index 0000000..1e47a29 --- /dev/null +++ b/claude-skills-reference/mermaid/references/block.md @@ -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. diff --git a/claude-skills-reference/mermaid/references/c4.md b/claude-skills-reference/mermaid/references/c4.md new file mode 100644 index 0000000..ae610d1 --- /dev/null +++ b/claude-skills-reference/mermaid/references/c4.md @@ -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,
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,
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,
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,
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,
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,
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") + +``` + + diff --git a/claude-skills-reference/mermaid/references/classDiagram.md b/claude-skills-reference/mermaid/references/classDiagram.md new file mode 100644 index 0000000..ffef1e5 --- /dev/null +++ b/claude-skills-reference/mermaid/references/classDiagram.md @@ -0,0 +1,1024 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/classDiagram.md](../../packages/mermaid/src/docs/syntax/classDiagram.md). + +# Class diagrams + +> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects." +> +> -Wikipedia + +The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed. + +Mermaid can render class diagrams. + +```mermaid-example +--- +title: Animal example +--- +classDiagram + note "From Duck till Zebra" + Animal <|-- Duck + note for Duck "can fly
can swim
can dive
can help in debugging" + Animal <|-- Fish + Animal <|-- Zebra + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class Duck{ + +String beakColor + +swim() + +quack() + } + class Fish{ + -int sizeInFeet + -canEat() + } + class Zebra{ + +bool is_wild + +run() + } +``` + +```mermaid +--- +title: Animal example +--- +classDiagram + note "From Duck till Zebra" + Animal <|-- Duck + note for Duck "can fly
can swim
can dive
can help in debugging" + Animal <|-- Fish + Animal <|-- Zebra + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class Duck{ + +String beakColor + +swim() + +quack() + } + class Fish{ + -int sizeInFeet + -canEat() + } + class Zebra{ + +bool is_wild + +run() + } +``` + +## Syntax + +### Class + +UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them. +A single instance of a class in the diagram contains three compartments: + +- The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized. It may also contain optional annotation text describing the nature of the class. +- The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase. +- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase. + +```mermaid-example +--- +title: Bank example +--- +classDiagram + class BankAccount + BankAccount : +String owner + BankAccount : +Bigdecimal balance + BankAccount : +deposit(amount) + BankAccount : +withdrawal(amount) + +``` + +```mermaid +--- +title: Bank example +--- +classDiagram + class BankAccount + BankAccount : +String owner + BankAccount : +Bigdecimal balance + BankAccount : +deposit(amount) + BankAccount : +withdrawal(amount) + +``` + +## Define a class + +There are two ways to define a class: + +- Explicitly using keyword **class** like `class Animal` which would define the Animal class. +- Via a **relationship** which defines two classes at a time along with their relationship. For instance, `Vehicle <|-- Car`. + +```mermaid-example +classDiagram + class Animal + Vehicle <|-- Car +``` + +```mermaid +classDiagram + class Animal + Vehicle <|-- Car +``` + +Naming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-). + +### Class labels + +In case you need to provide a label for a class, you can use the following syntax: + +```mermaid-example +classDiagram + class Animal["Animal with a label"] + class Car["Car with *! symbols"] + Animal --> Car +``` + +```mermaid +classDiagram + class Animal["Animal with a label"] + class Car["Car with *! symbols"] + Animal --> Car +``` + +You can also use backticks to escape special characters in the label: + +```mermaid-example +classDiagram + class `Animal Class!` + class `Car Class` + `Animal Class!` --> `Car Class` +``` + +```mermaid +classDiagram + class `Animal Class!` + class `Car Class` + `Animal Class!` --> `Car Class` +``` + +## Defining Members of a class + +UML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them. + +Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and all others as attributes. + +There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are : + +- Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: + +```mermaid-example +classDiagram +class BankAccount +BankAccount : +String owner +BankAccount : +BigDecimal balance +BankAccount : +deposit(amount) +BankAccount : +withdrawal(amount) +``` + +```mermaid +classDiagram +class BankAccount +BankAccount : +String owner +BankAccount : +BigDecimal balance +BankAccount : +deposit(amount) +BankAccount : +withdrawal(amount) +``` + +- Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example: + +```mermaid-example +classDiagram +class BankAccount{ + +String owner + +BigDecimal balance + +deposit(amount) + +withdrawal(amount) +} +``` + +```mermaid +classDiagram +class BankAccount{ + +String owner + +BigDecimal balance + +deposit(amount) + +withdrawal(amount) +} +``` + +#### Return Type + +Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example: + +```mermaid-example +classDiagram +class BankAccount{ + +String owner + +BigDecimal balance + +deposit(amount) bool + +withdrawal(amount) int +} +``` + +```mermaid +classDiagram +class BankAccount{ + +String owner + +BigDecimal balance + +deposit(amount) bool + +withdrawal(amount) int +} +``` + +#### Generic Types + +Generics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List>` are supported, though generics that include a comma are currently not supported. (such as `List>`) + +> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types. + +```mermaid-example +classDiagram +class Square~Shape~{ + int id + List~int~ position + setPoints(List~int~ points) + getPoints() List~int~ +} + +Square : -List~string~ messages +Square : +setMessages(List~string~ messages) +Square : +getMessages() List~string~ +Square : +getDistanceMatrix() List~List~int~~ +``` + +```mermaid +classDiagram +class Square~Shape~{ + int id + List~int~ position + setPoints(List~int~ points) + getPoints() List~int~ +} + +Square : -List~string~ messages +Square : +setMessages(List~string~ messages) +Square : +getMessages() List~string~ +Square : +getDistanceMatrix() List~List~int~~ +``` + +#### Visibility + +To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name: + +- `+` Public +- `-` Private +- `#` Protected +- `~` Package/Internal + +> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()` or after the return type: +> +> - `*` Abstract e.g.: `someAbstractMethod()*` or `someAbstractMethod() int*` +> - `$` Static e.g.: `someStaticMethod()$` or `someStaticMethod() String$` + +> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the very end: +> +> - `$` Static e.g.: `String someField$` + +## Defining Relationship + +A relationship is a general term covering the specific types of logical connections found on class and object diagrams. + +``` +[classA][Arrow][ClassB] +``` + +There are eight different types of relations defined for classes under UML which are currently supported: + +| Type | Description | +| ------- | ------------- | +| `<\|--` | Inheritance | +| `*--` | Composition | +| `o--` | Aggregation | +| `-->` | Association | +| `--` | Link (Solid) | +| `..>` | Dependency | +| `..\|>` | Realization | +| `..` | Link (Dashed) | + +```mermaid-example +classDiagram +classA <|-- classB +classC *-- classD +classE o-- classF +classG <-- classH +classI -- classJ +classK <.. classL +classM <|.. classN +classO .. classP + +``` + +```mermaid +classDiagram +classA <|-- classB +classC *-- classD +classE o-- classF +classG <-- classH +classI -- classJ +classK <.. classL +classM <|.. classN +classO .. classP + +``` + +We can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well: + +```mermaid-example +classDiagram +classA --|> classB : Inheritance +classC --* classD : Composition +classE --o classF : Aggregation +classG --> classH : Association +classI -- classJ : Link(Solid) +classK ..> classL : Dependency +classM ..|> classN : Realization +classO .. classP : Link(Dashed) + +``` + +```mermaid +classDiagram +classA --|> classB : Inheritance +classC --* classD : Composition +classE --o classF : Aggregation +classG --> classH : Association +classI -- classJ : Link(Solid) +classK ..> classL : Dependency +classM ..|> classN : Realization +classO .. classP : Link(Dashed) + +``` + +### Labels on Relations + +It is possible to add label text to a relation: + +``` +[classA][Arrow][ClassB]:LabelText +``` + +```mermaid-example +classDiagram +classA <|-- classB : implements +classC *-- classD : composition +classE o-- classF : aggregation +``` + +```mermaid +classDiagram +classA <|-- classB : implements +classC *-- classD : composition +classE o-- classF : aggregation +``` + +### Two-way relations + +Relations can logically represent an N:M association: + +```mermaid-example +classDiagram + Animal <|--|> Zebra +``` + +```mermaid +classDiagram + Animal <|--|> Zebra +``` + +Here is the syntax: + +``` +[Relation Type][Link][Relation Type] +``` + +Where `Relation Type` can be one of: + +| Type | Description | +| ----- | ----------- | +| `<\|` | Inheritance | +| `\*` | Composition | +| `o` | Aggregation | +| `>` | Association | +| `<` | Association | +| `\|>` | Realization | + +And `Link` can be one of: + +| Type | Description | +| ---- | ----------- | +| -- | Solid | +| .. | Dashed | + +### Lollipop Interfaces + +Classes can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax: + +- `bar ()-- foo` +- `foo --() bar` + +The interface (bar) with the lollipop connects to the class (foo). + +Note: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it. + +```mermaid-example +classDiagram + bar ()-- foo +``` + +```mermaid +classDiagram + bar ()-- foo +``` + +```mermaid-example +classDiagram + class Class01 { + int amount + draw() + } + Class01 --() bar + Class02 --() bar + + foo ()-- Class01 +``` + +```mermaid +classDiagram + class Class01 { + int amount + draw() + } + Class01 --() bar + Class02 --() bar + + foo ()-- Class01 +``` + +## Define Namespace + +A namespace groups classes. + +```mermaid-example +classDiagram +namespace BaseShapes { + class Triangle + class Rectangle { + double width + double height + } +} +``` + +```mermaid +classDiagram +namespace BaseShapes { + class Triangle + class Rectangle { + double width + double height + } +} +``` + +## Cardinality / Multiplicity on relations + +Multiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies. + +Multiplicity notations are placed near the end of an association. + +The different cardinality options are : + +- `1` Only 1 +- `0..1` Zero or One +- `1..*` One or more +- `*` Many +- `n` n (where n>1) +- `0..n` zero to n (where n>1) +- `1..n` one to n (where n>1) + +Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example: + +``` +[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText +``` + +```mermaid-example +classDiagram + Customer "1" --> "*" Ticket + Student "1" --> "1..*" Course + Galaxy --> "many" Star : Contains +``` + +```mermaid +classDiagram + Customer "1" --> "*" Ticket + Student "1" --> "1..*" Course + Galaxy --> "many" Star : Contains +``` + +## Annotations on classes + +It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include: + +- `<>` To represent an Interface class +- `<>` To represent an abstract class +- `<>` To represent a service class +- `<>` To represent an enum + +Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same: + +> **Tip:**\ +> In Mermaid class diagrams, annotations like `<>` can be attached in two ways: +> +> - **Inline with the class definition** (Recommended for consistency): +> +> ```mermaid-example +> classDiagram +> class Shape <> +> ``` +> +> ```mermaid +> classDiagram +> class Shape <> +> ``` +> +> - **Separate line after the class definition**: +> +> ```mermaid-example +> classDiagram +> class Shape +> <> Shape +> ``` +> +> ```mermaid +> classDiagram +> class Shape +> <> Shape +> ``` +> +> Both methods are fully supported and produce identical diagrams.\ +> However, it is recommended to use the **inline style** for better readability and consistent formatting across diagrams. + +- In a **_separate line_** after a class is defined: + +```mermaid-example +classDiagram +class Shape +<> Shape +Shape : noOfVertices +Shape : draw() +``` + +```mermaid +classDiagram +class Shape +<> Shape +Shape : noOfVertices +Shape : draw() +``` + +- In a **_nested structure_** along with the class definition: + +```mermaid-example +classDiagram +class Shape{ + <> + noOfVertices + draw() +} +class Color{ + <> + RED + BLUE + GREEN + WHITE + BLACK +} + +``` + +```mermaid +classDiagram +class Shape{ + <> + noOfVertices + draw() +} +class Color{ + <> + RED + BLUE + GREEN + WHITE + BLACK +} + +``` + +## Comments + +Comments can be entered within a class diagram, 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 until the next newline will be treated as a comment, including any class diagram syntax. + +```mermaid-example +classDiagram +%% This whole line is a comment classDiagram class Shape <> +class Shape{ + <> + noOfVertices + draw() +} +``` + +```mermaid +classDiagram +%% This whole line is a comment classDiagram class Shape <> +class Shape{ + <> + noOfVertices + draw() +} +``` + +## Setting the direction of the diagram + +With class diagrams you can use the direction statement to set the direction in which the diagram will render: + +```mermaid-example +classDiagram + direction RL + class Student { + -idCard : IdCard + } + class IdCard{ + -id : int + -name : string + } + class Bike{ + -id : int + -name : string + } + Student "1" --o "1" IdCard : carries + Student "1" --o "1" Bike : rides +``` + +```mermaid +classDiagram + direction RL + class Student { + -idCard : IdCard + } + class IdCard{ + -id : int + -name : string + } + class Bike{ + -id : int + -name : string + } + Student "1" --o "1" IdCard : carries + Student "1" --o "1" Bike : rides +``` + +## Interaction + +It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. + +You would define these actions on a separate line after all classes have been declared. + +``` +action className "reference" "tooltip" +click className call callback() "tooltip" +click className href "url" "tooltip" +``` + +- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called +- _className_ is the id of the node that the action will be associated with +- _reference_ is either the url link, or the function name for callback. +- (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.) +- note: callback function will be called with the nodeId as parameter. + +## Notes + +It is possible to add notes on the diagram using `note "line1\nline2"`. A note can be added for a specific class using `note for "line1\nline2"`. + +### Examples + +```mermaid-example +classDiagram + note "This is a general note" + note for MyClass "This is a note for a class" + class MyClass{ + } +``` + +```mermaid +classDiagram + note "This is a general note" + note for MyClass "This is a note for a class" + class MyClass{ + } +``` + +_URL Link:_ + +```mermaid-example +classDiagram +class Shape +link Shape "https://www.github.com" "This is a tooltip for a link" +class Shape2 +click Shape2 href "https://www.github.com" "This is a tooltip for a link" +``` + +```mermaid +classDiagram +class Shape +link Shape "https://www.github.com" "This is a tooltip for a link" +class Shape2 +click Shape2 href "https://www.github.com" "This is a tooltip for a link" +``` + +_Callback:_ + +```mermaid-example +classDiagram +class Shape +callback Shape "callbackFunction" "This is a tooltip for a callback" +class Shape2 +click Shape2 call callbackFunction() "This is a tooltip for a callback" +``` + +```mermaid +classDiagram +class Shape +callback Shape "callbackFunction" "This is a tooltip for a callback" +class Shape2 +click Shape2 call callbackFunction() "This is a tooltip for a callback" +``` + +```html + +``` + +```mermaid-example +classDiagram + class Class01 + class Class02 + callback Class01 "callbackFunction" "Callback tooltip" + link Class02 "https://www.github.com" "This is a link" + class Class03 + class Class04 + click Class03 call callbackFunction() "Callback tooltip" + click Class04 href "https://www.github.com" "This is a link" +``` + +```mermaid +classDiagram + class Class01 + class Class02 + callback Class01 "callbackFunction" "Callback tooltip" + link Class02 "https://www.github.com" "This is a link" + class Class03 + class Class04 + click Class03 call callbackFunction() "Callback tooltip" + click Class04 href "https://www.github.com" "This is a link" +``` + +> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. + +Beginner's tip—a full example using interactive links in an HTML page: + +```html + + 
+    classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+      }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+      }
+    class Zebra{
+      +bool is_wild
+      +run()
+      }
+
+      callback Duck "callback" "Tooltip"
+      link Zebra "https://www.github.com" "This is a link"
+
+ + + +``` + +## Styling + +### Styling a node + +It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword. + +Note that notes and namespaces cannot be styled individually but do support themes. + +```mermaid-example +classDiagram + class Animal + class Mineral + style Animal fill:#f9f,stroke:#333,stroke-width:4px + style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 +``` + +```mermaid +classDiagram + class Animal + class Mineral + style Animal fill:#f9f,stroke:#333,stroke-width:4px + style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 +``` + +#### 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; +``` + +Also, it is possible to define style to multiple classes in one statement: + +``` +classDef firstClassName,secondClassName font-size:12pt; +``` + +Attachment of a class to a node is done as per below: + +``` +cssClass "nodeId1" className; +``` + +It is also possible to attach a class to a list of nodes in one statement: + +``` +cssClass "nodeId1,nodeId2" className; +``` + +A shorter form of adding a class is to attach the classname to the node using the `:::` operator: + +```mermaid-example +classDiagram + class Animal:::someclass + classDef someclass fill:#f96 +``` + +```mermaid +classDiagram + class Animal:::someclass + classDef someclass fill:#f96 +``` + +Or: + +```mermaid-example +classDiagram + class Animal:::someclass { + -int sizeInFeet + -canEat() + } + classDef someclass fill:#f96 +``` + +```mermaid +classDiagram + class Animal:::someclass { + -int sizeInFeet + -canEat() + } + classDef someclass fill:#f96 +``` + +### 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; +``` + +```mermaid-example +classDiagram + class Animal:::pink + class Mineral + + classDef default fill:#f96,color:red + classDef pink color:#f9f +``` + +```mermaid +classDiagram + class Animal:::pink + class Mineral + + classDef default fill:#f96,color:red + classDef pink color:#f9f +``` + +### CSS Classes + +It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example +below: + +**Example style** + +```html + +``` + +**Example definition** + +```mermaid-example +classDiagram + class Animal:::styleClass +``` + +```mermaid +classDiagram + class Animal:::styleClass +``` + +> cssClasses cannot be added using this shorthand method at the same time as a relation statement. + +## Configuration + +### Members Box + +It is possible to hide the empty members box of a class node. + +This is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html) + +```mermaid-example +--- + config: + class: + hideEmptyMembersBox: true +--- +classDiagram + class Duck +``` + +```mermaid +--- + config: + class: + hideEmptyMembersBox: true +--- +classDiagram + class Duck +``` diff --git a/claude-skills-reference/mermaid/references/config-configuration.md b/claude-skills-reference/mermaid/references/config-configuration.md new file mode 100644 index 0000000..05fcd9d --- /dev/null +++ b/claude-skills-reference/mermaid/references/config-configuration.md @@ -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. diff --git a/claude-skills-reference/mermaid/references/config-directives.md b/claude-skills-reference/mermaid/references/config-directives.md new file mode 100644 index 0000000..be77b3b --- /dev/null +++ b/claude-skills-reference/mermaid/references/config-directives.md @@ -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\+). 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 +``` diff --git a/claude-skills-reference/mermaid/references/config-layouts.md b/claude-skills-reference/mermaid/references/config-layouts.md new file mode 100644 index 0000000..18e9c94 --- /dev/null +++ b/claude-skills-reference/mermaid/references/config-layouts.md @@ -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; +``` diff --git a/claude-skills-reference/mermaid/references/config-math.md b/claude-skills-reference/mermaid/references/config-math.md new file mode 100644 index 0000000..b2063e3 --- /dev/null +++ b/claude-skills-reference/mermaid/references/config-math.md @@ -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 + + + + + + + + + + + + +``` + +## 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). + +![Image showing differences between Browsers](img/mathMLDifferences.png) diff --git a/claude-skills-reference/mermaid/references/config-theming.md b/claude-skills-reference/mermaid/references/config-theming.md new file mode 100644 index 0000000..7a67937 --- /dev/null +++ b/claude-skills-reference/mermaid/references/config-theming.md @@ -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 | diff --git a/claude-skills-reference/mermaid/references/config-tidy-tree.md b/claude-skills-reference/mermaid/references/config-tidy-tree.md new file mode 100644 index 0000000..1d42275 --- /dev/null +++ b/claude-skills-reference/mermaid/references/config-tidy-tree.md @@ -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
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
and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping +``` + +## Note + +- Currently, tidy-tree is primarily supported for mindmap diagrams. diff --git a/claude-skills-reference/mermaid/references/entityRelationshipDiagram.md b/claude-skills-reference/mermaid/references/entityRelationshipDiagram.md new file mode 100644 index 0000000..e31a00e --- /dev/null +++ b/claude-skills-reference/mermaid/references/entityRelationshipDiagram.md @@ -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: + +``` + [ : ] +``` + +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. + + diff --git a/claude-skills-reference/mermaid/references/examples.md b/claude-skills-reference/mermaid/references/examples.md new file mode 100644 index 0000000..2d99cc0 --- /dev/null +++ b/claude-skills-reference/mermaid/references/examples.md @@ -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
long time, so long
that the text does
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
long time, so long
that the text does
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
edge comment --> ro + di{Diamond with
line break} -.-> ro(Rounded
square
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
in an Odd shape] + + %% Comments after double percent signs + e((Inner / circle
and some odd
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
edge comment --> ro + di{Diamond with
line break} -.-> ro(Rounded
square
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
in an Odd shape] + + %% Comments after double percent signs + e((Inner / circle
and some odd
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
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
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 +``` + + diff --git a/claude-skills-reference/mermaid/references/flowchart.md b/claude-skills-reference/mermaid/references/flowchart.md new file mode 100644 index 0000000..323cd43 --- /dev/null +++ b/claude-skills-reference/mermaid/references/flowchart.md @@ -0,0 +1,2114 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/flowchart.md](../../packages/mermaid/src/docs/syntax/flowchart.md). + +# Flowcharts - Basic Syntax + +Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs. + +> **Warning** +> If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart. + +> **Warning** +> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops"). +> +> Typing "A---oB" will create a [circle edge](#circle-edge-example). +> +> Typing "A---xB" will create a [cross edge](#cross-edge-example). + +### A node (default) + +```mermaid-example +--- +title: Node +--- +flowchart LR + id +``` + +```mermaid +--- +title: Node +--- +flowchart LR + id +``` + +> **Note** +> The id is what is displayed in the box. + +> **💡 Tip** +> Instead of `flowchart` one can also use `graph`. + +### A node with text + +It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text +found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The +one previously defined will be used when rendering the box. + +```mermaid-example +--- +title: Node with text +--- +flowchart LR + id1[This is the text in the box] +``` + +```mermaid +--- +title: Node with text +--- +flowchart LR + id1[This is the text in the box] +``` + +#### Unicode text + +Use `"` to enclose the unicode text. + +```mermaid-example +flowchart LR + id["This ❤ Unicode"] +``` + +```mermaid +flowchart LR + id["This ❤ Unicode"] +``` + +#### Markdown formatting + +Use double quotes and backticks "\` text \`" to enclose the markdown text. + +```mermaid-example +--- +config: + htmlLabels: false +--- +flowchart LR + markdown["`This **is** _Markdown_`"] + newLines["`Line1 + Line 2 + Line 3`"] + markdown --> newLines +``` + +```mermaid +--- +config: + htmlLabels: false +--- +flowchart LR + markdown["`This **is** _Markdown_`"] + newLines["`Line1 + Line 2 + Line 3`"] + markdown --> newLines +``` + +### Direction + +This statement declares the direction of the Flowchart. + +This declares the flowchart is oriented from top to bottom (`TD` or `TB`). + +```mermaid-example +flowchart TD + Start --> Stop +``` + +```mermaid +flowchart TD + Start --> Stop +``` + +This declares the flowchart is oriented from left to right (`LR`). + +```mermaid-example +flowchart LR + Start --> Stop +``` + +```mermaid +flowchart LR + Start --> Stop +``` + +Possible FlowChart orientations are: + +- TB - Top to bottom +- TD - Top-down/ same as top to bottom +- BT - Bottom to top +- RL - Right to left +- LR - Left to right + +## Node shapes + +### A node with round edges + +```mermaid-example +flowchart LR + id1(This is the text in the box) +``` + +```mermaid +flowchart LR + id1(This is the text in the box) +``` + +### A stadium-shaped node + +```mermaid-example +flowchart LR + id1([This is the text in the box]) +``` + +```mermaid +flowchart LR + id1([This is the text in the box]) +``` + +### A node in a subroutine shape + +```mermaid-example +flowchart LR + id1[[This is the text in the box]] +``` + +```mermaid +flowchart LR + id1[[This is the text in the box]] +``` + +### A node in a cylindrical shape + +```mermaid-example +flowchart LR + id1[(Database)] +``` + +```mermaid +flowchart LR + id1[(Database)] +``` + +### A node in the form of a circle + +```mermaid-example +flowchart LR + id1((This is the text in the circle)) +``` + +```mermaid +flowchart LR + id1((This is the text in the circle)) +``` + +### A node in an asymmetric shape + +```mermaid-example +flowchart LR + id1>This is the text in the box] +``` + +```mermaid +flowchart LR + id1>This is the text in the box] +``` + +Currently only the shape above is possible and not its mirror. _This might change with future releases._ + +### A node (rhombus) + +```mermaid-example +flowchart LR + id1{This is the text in the box} +``` + +```mermaid +flowchart LR + id1{This is the text in the box} +``` + +### A hexagon node + +```mermaid-example +flowchart LR + id1{{This is the text in the box}} +``` + +```mermaid +flowchart LR + id1{{This is the text in the box}} +``` + +### Parallelogram + +```mermaid-example +flowchart TD + id1[/This is the text in the box/] +``` + +```mermaid +flowchart TD + id1[/This is the text in the box/] +``` + +### Parallelogram alt + +```mermaid-example +flowchart TD + id1[\This is the text in the box\] +``` + +```mermaid +flowchart TD + id1[\This is the text in the box\] +``` + +### Trapezoid + +```mermaid-example +flowchart TD + A[/Christmas\] +``` + +```mermaid +flowchart TD + A[/Christmas\] +``` + +### Trapezoid alt + +```mermaid-example +flowchart TD + B[\Go shopping/] +``` + +```mermaid +flowchart TD + B[\Go shopping/] +``` + +### Double circle + +```mermaid-example +flowchart TD + id1(((This is the text in the circle))) +``` + +```mermaid +flowchart TD + id1(((This is the text in the circle))) +``` + +## Expanded Node Shapes in Mermaid Flowcharts (v11.3.0+) + +Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning. + +New Syntax for Shape Definition + +Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format: + +``` +A@{ shape: rect } +``` + +This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`. + +### Complete List of New Shapes + +Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases: + +| **Semantic Name** | **Shape Name** | **Short Name** | **Description** | **Alias Supported** | +| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- | +| Bang | Bang | `bang` | Bang | `bang` | +| Card | Notched Rectangle | `notch-rect` | Represents a card | `card`, `notched-rectangle` | +| Cloud | Cloud | `cloud` | cloud | `cloud` | +| Collate | Hourglass | `hourglass` | Represents a collate operation | `collate`, `hourglass` | +| Com Link | Lightning Bolt | `bolt` | Communication link | `com-link`, `lightning-bolt` | +| Comment | Curly Brace | `brace` | Adds a comment | `brace-l`, `comment` | +| Comment Right | Curly Brace | `brace-r` | Adds a comment | | +| Comment with braces on both sides | Curly Braces | `braces` | Adds a comment | | +| Data Input/Output | Lean Right | `lean-r` | Represents input or output | `in-out`, `lean-right` | +| Data Input/Output | Lean Left | `lean-l` | Represents output or input | `lean-left`, `out-in` | +| Database | Cylinder | `cyl` | Database storage | `cylinder`, `database`, `db` | +| Decision | Diamond | `diam` | Decision-making step | `decision`, `diamond`, `question` | +| Delay | Half-Rounded Rectangle | `delay` | Represents a delay | `half-rounded-rectangle` | +| Direct Access Storage | Horizontal Cylinder | `h-cyl` | Direct access storage | `das`, `horizontal-cylinder` | +| Disk Storage | Lined Cylinder | `lin-cyl` | Disk storage | `disk`, `lined-cylinder` | +| Display | Curved Trapezoid | `curv-trap` | Represents a display | `curved-trapezoid`, `display` | +| Divided Process | Divided Rectangle | `div-rect` | Divided process shape | `div-proc`, `divided-process`, `divided-rectangle` | +| Document | Document | `doc` | Represents a document | `doc`, `document` | +| Event | Rounded Rectangle | `rounded` | Represents an event | `event` | +| Extract | Triangle | `tri` | Extraction process | `extract`, `triangle` | +| Fork/Join | Filled Rectangle | `fork` | Fork or join in process flow | `join` | +| Internal Storage | Window Pane | `win-pane` | Internal storage | `internal-storage`, `window-pane` | +| Junction | Filled Circle | `f-circ` | Junction point | `filled-circle`, `junction` | +| Lined Document | Lined Document | `lin-doc` | Lined document | `lined-document` | +| Lined/Shaded Process | Lined Rectangle | `lin-rect` | Lined process shape | `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` | +| Loop Limit | Trapezoidal Pentagon | `notch-pent` | Loop limit step | `loop-limit`, `notched-pentagon` | +| Manual File | Flipped Triangle | `flip-tri` | Manual file operation | `flipped-triangle`, `manual-file` | +| Manual Input | Sloped Rectangle | `sl-rect` | Manual input step | `manual-input`, `sloped-rectangle` | +| Manual Operation | Trapezoid Base Top | `trap-t` | Represents a manual task | `inv-trapezoid`, `manual`, `trapezoid-top` | +| Multi-Document | Stacked Document | `docs` | Multiple documents | `documents`, `st-doc`, `stacked-document` | +| Multi-Process | Stacked Rectangle | `st-rect` | Multiple processes | `processes`, `procs`, `stacked-rectangle` | +| Odd | Odd | `odd` | Odd shape | | +| Paper Tape | Flag | `flag` | Paper tape | `paper-tape` | +| Prepare Conditional | Hexagon | `hex` | Preparation or condition step | `hexagon`, `prepare` | +| Priority Action | Trapezoid Base Bottom | `trap-b` | Priority action | `priority`, `trapezoid`, `trapezoid-bottom` | +| Process | Rectangle | `rect` | Standard process shape | `proc`, `process`, `rectangle` | +| Start | Circle | `circle` | Starting point | `circ` | +| Start | Small Circle | `sm-circ` | Small starting point | `small-circle`, `start` | +| Stop | Double Circle | `dbl-circ` | Represents a stop point | `double-circle` | +| Stop | Framed Circle | `fr-circ` | Stop point | `framed-circle`, `stop` | +| Stored Data | Bow Tie Rectangle | `bow-rect` | Stored data | `bow-tie-rectangle`, `stored-data` | +| Subprocess | Framed Rectangle | `fr-rect` | Subprocess | `framed-rectangle`, `subproc`, `subprocess`, `subroutine` | +| Summary | Crossed Circle | `cross-circ` | Summary | `crossed-circle`, `summary` | +| Tagged Document | Tagged Document | `tag-doc` | Tagged document | `tag-doc`, `tagged-document` | +| Tagged Process | Tagged Rectangle | `tag-rect` | Tagged process | `tag-proc`, `tagged-process`, `tagged-rectangle` | +| Terminal Point | Stadium | `stadium` | Terminal point | `pill`, `terminal` | +| Text Block | Text Block | `text` | Text block | | + +### Example Flowchart with New Shapes + +Here’s an example flowchart that utilizes some of the newly introduced shapes: + +```mermaid-example +flowchart RL + A@{ shape: manual-file, label: "File Handling"} + B@{ shape: manual-input, label: "User Input"} + C@{ shape: docs, label: "Multiple Documents"} + D@{ shape: procs, label: "Process Automation"} + E@{ shape: paper-tape, label: "Paper Records"} +``` + +```mermaid +flowchart RL + A@{ shape: manual-file, label: "File Handling"} + B@{ shape: manual-input, label: "User Input"} + C@{ shape: docs, label: "Multiple Documents"} + D@{ shape: procs, label: "Process Automation"} + E@{ shape: paper-tape, label: "Paper Records"} +``` + +### Process + +```mermaid-example +flowchart TD + A@{ shape: rect, label: "This is a process" } +``` + +```mermaid +flowchart TD + A@{ shape: rect, label: "This is a process" } +``` + +### Event + +```mermaid-example +flowchart TD + A@{ shape: rounded, label: "This is an event" } +``` + +```mermaid +flowchart TD + A@{ shape: rounded, label: "This is an event" } +``` + +### Terminal Point (Stadium) + +```mermaid-example +flowchart TD + A@{ shape: stadium, label: "Terminal point" } +``` + +```mermaid +flowchart TD + A@{ shape: stadium, label: "Terminal point" } +``` + +### Subprocess + +```mermaid-example +flowchart TD + A@{ shape: subproc, label: "This is a subprocess" } +``` + +```mermaid +flowchart TD + A@{ shape: subproc, label: "This is a subprocess" } +``` + +### Database (Cylinder) + +```mermaid-example +flowchart TD + A@{ shape: cyl, label: "Database" } +``` + +```mermaid +flowchart TD + A@{ shape: cyl, label: "Database" } +``` + +### Start (Circle) + +```mermaid-example +flowchart TD + A@{ shape: circle, label: "Start" } +``` + +```mermaid +flowchart TD + A@{ shape: circle, label: "Start" } +``` + +### Odd + +```mermaid-example +flowchart TD + A@{ shape: odd, label: "Odd shape" } +``` + +```mermaid +flowchart TD + A@{ shape: odd, label: "Odd shape" } +``` + +### Decision (Diamond) + +```mermaid-example +flowchart TD + A@{ shape: diamond, label: "Decision" } +``` + +```mermaid +flowchart TD + A@{ shape: diamond, label: "Decision" } +``` + +### Prepare Conditional (Hexagon) + +```mermaid-example +flowchart TD + A@{ shape: hex, label: "Prepare conditional" } +``` + +```mermaid +flowchart TD + A@{ shape: hex, label: "Prepare conditional" } +``` + +### Data Input/Output (Lean Right) + +```mermaid-example +flowchart TD + A@{ shape: lean-r, label: "Input/Output" } +``` + +```mermaid +flowchart TD + A@{ shape: lean-r, label: "Input/Output" } +``` + +### Data Input/Output (Lean Left) + +```mermaid-example +flowchart TD + A@{ shape: lean-l, label: "Output/Input" } +``` + +```mermaid +flowchart TD + A@{ shape: lean-l, label: "Output/Input" } +``` + +### Priority Action (Trapezoid Base Bottom) + +```mermaid-example +flowchart TD + A@{ shape: trap-b, label: "Priority action" } +``` + +```mermaid +flowchart TD + A@{ shape: trap-b, label: "Priority action" } +``` + +### Manual Operation (Trapezoid Base Top) + +```mermaid-example +flowchart TD + A@{ shape: trap-t, label: "Manual operation" } +``` + +```mermaid +flowchart TD + A@{ shape: trap-t, label: "Manual operation" } +``` + +### Stop (Double Circle) + +```mermaid-example +flowchart TD + A@{ shape: dbl-circ, label: "Stop" } +``` + +```mermaid +flowchart TD + A@{ shape: dbl-circ, label: "Stop" } +``` + +### Text Block + +```mermaid-example +flowchart TD + A@{ shape: text, label: "This is a text block" } +``` + +```mermaid +flowchart TD + A@{ shape: text, label: "This is a text block" } +``` + +### Card (Notched Rectangle) + +```mermaid-example +flowchart TD + A@{ shape: notch-rect, label: "Card" } +``` + +```mermaid +flowchart TD + A@{ shape: notch-rect, label: "Card" } +``` + +### Lined/Shaded Process + +```mermaid-example +flowchart TD + A@{ shape: lin-rect, label: "Lined process" } +``` + +```mermaid +flowchart TD + A@{ shape: lin-rect, label: "Lined process" } +``` + +### Start (Small Circle) + +```mermaid-example +flowchart TD + A@{ shape: sm-circ, label: "Small start" } +``` + +```mermaid +flowchart TD + A@{ shape: sm-circ, label: "Small start" } +``` + +### Stop (Framed Circle) + +```mermaid-example +flowchart TD + A@{ shape: framed-circle, label: "Stop" } +``` + +```mermaid +flowchart TD + A@{ shape: framed-circle, label: "Stop" } +``` + +### Fork/Join (Long Rectangle) + +```mermaid-example +flowchart TD + A@{ shape: fork, label: "Fork or Join" } +``` + +```mermaid +flowchart TD + A@{ shape: fork, label: "Fork or Join" } +``` + +### Collate (Hourglass) + +```mermaid-example +flowchart TD + A@{ shape: hourglass, label: "Collate" } +``` + +```mermaid +flowchart TD + A@{ shape: hourglass, label: "Collate" } +``` + +### Comment (Curly Brace) + +```mermaid-example +flowchart TD + A@{ shape: comment, label: "Comment" } +``` + +```mermaid +flowchart TD + A@{ shape: comment, label: "Comment" } +``` + +### Comment Right (Curly Brace Right) + +```mermaid-example +flowchart TD + A@{ shape: brace-r, label: "Comment" } +``` + +```mermaid +flowchart TD + A@{ shape: brace-r, label: "Comment" } +``` + +### Comment with braces on both sides + +```mermaid-example +flowchart TD + A@{ shape: braces, label: "Comment" } +``` + +```mermaid +flowchart TD + A@{ shape: braces, label: "Comment" } +``` + +### Com Link (Lightning Bolt) + +```mermaid-example +flowchart TD + A@{ shape: bolt, label: "Communication link" } +``` + +```mermaid +flowchart TD + A@{ shape: bolt, label: "Communication link" } +``` + +### Document + +```mermaid-example +flowchart TD + A@{ shape: doc, label: "Document" } +``` + +```mermaid +flowchart TD + A@{ shape: doc, label: "Document" } +``` + +### Delay (Half-Rounded Rectangle) + +```mermaid-example +flowchart TD + A@{ shape: delay, label: "Delay" } +``` + +```mermaid +flowchart TD + A@{ shape: delay, label: "Delay" } +``` + +### Direct Access Storage (Horizontal Cylinder) + +```mermaid-example +flowchart TD + A@{ shape: das, label: "Direct access storage" } +``` + +```mermaid +flowchart TD + A@{ shape: das, label: "Direct access storage" } +``` + +### Disk Storage (Lined Cylinder) + +```mermaid-example +flowchart TD + A@{ shape: lin-cyl, label: "Disk storage" } +``` + +```mermaid +flowchart TD + A@{ shape: lin-cyl, label: "Disk storage" } +``` + +### Display (Curved Trapezoid) + +```mermaid-example +flowchart TD + A@{ shape: curv-trap, label: "Display" } +``` + +```mermaid +flowchart TD + A@{ shape: curv-trap, label: "Display" } +``` + +### Divided Process (Divided Rectangle) + +```mermaid-example +flowchart TD + A@{ shape: div-rect, label: "Divided process" } +``` + +```mermaid +flowchart TD + A@{ shape: div-rect, label: "Divided process" } +``` + +### Extract (Small Triangle) + +```mermaid-example +flowchart TD + A@{ shape: tri, label: "Extract" } +``` + +```mermaid +flowchart TD + A@{ shape: tri, label: "Extract" } +``` + +### Internal Storage (Window Pane) + +```mermaid-example +flowchart TD + A@{ shape: win-pane, label: "Internal storage" } +``` + +```mermaid +flowchart TD + A@{ shape: win-pane, label: "Internal storage" } +``` + +### Junction (Filled Circle) + +```mermaid-example +flowchart TD + A@{ shape: f-circ, label: "Junction" } +``` + +```mermaid +flowchart TD + A@{ shape: f-circ, label: "Junction" } +``` + +### Lined Document + +```mermaid-example +flowchart TD + A@{ shape: lin-doc, label: "Lined document" } +``` + +```mermaid +flowchart TD + A@{ shape: lin-doc, label: "Lined document" } +``` + +### Loop Limit (Notched Pentagon) + +```mermaid-example +flowchart TD + A@{ shape: notch-pent, label: "Loop limit" } +``` + +```mermaid +flowchart TD + A@{ shape: notch-pent, label: "Loop limit" } +``` + +### Manual File (Flipped Triangle) + +```mermaid-example +flowchart TD + A@{ shape: flip-tri, label: "Manual file" } +``` + +```mermaid +flowchart TD + A@{ shape: flip-tri, label: "Manual file" } +``` + +### Manual Input (Sloped Rectangle) + +```mermaid-example +flowchart TD + A@{ shape: sl-rect, label: "Manual input" } +``` + +```mermaid +flowchart TD + A@{ shape: sl-rect, label: "Manual input" } +``` + +### Multi-Document (Stacked Document) + +```mermaid-example +flowchart TD + A@{ shape: docs, label: "Multiple documents" } +``` + +```mermaid +flowchart TD + A@{ shape: docs, label: "Multiple documents" } +``` + +### Multi-Process (Stacked Rectangle) + +```mermaid-example +flowchart TD + A@{ shape: processes, label: "Multiple processes" } +``` + +```mermaid +flowchart TD + A@{ shape: processes, label: "Multiple processes" } +``` + +### Paper Tape (Flag) + +```mermaid-example +flowchart TD + A@{ shape: flag, label: "Paper tape" } +``` + +```mermaid +flowchart TD + A@{ shape: flag, label: "Paper tape" } +``` + +### Stored Data (Bow Tie Rectangle) + +```mermaid-example +flowchart TD + A@{ shape: bow-rect, label: "Stored data" } +``` + +```mermaid +flowchart TD + A@{ shape: bow-rect, label: "Stored data" } +``` + +### Summary (Crossed Circle) + +```mermaid-example +flowchart TD + A@{ shape: cross-circ, label: "Summary" } +``` + +```mermaid +flowchart TD + A@{ shape: cross-circ, label: "Summary" } +``` + +### Tagged Document + +```mermaid-example +flowchart TD + A@{ shape: tag-doc, label: "Tagged document" } +``` + +```mermaid +flowchart TD + A@{ shape: tag-doc, label: "Tagged document" } +``` + +### Tagged Process (Tagged Rectangle) + +```mermaid-example +flowchart TD + A@{ shape: tag-rect, label: "Tagged process" } +``` + +```mermaid +flowchart TD + A@{ shape: tag-rect, label: "Tagged process" } +``` + +## Special shapes in Mermaid Flowcharts (v11.3.0+) + +Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** and **image**. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity. + +### Icon Shape + +You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions to [add custom icons](../config/icons.md). The syntax for defining an icon shape is as follows: + +```mermaid-example +flowchart TD + A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 } +``` + +```mermaid +flowchart TD + A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 } +``` + +#### Parameters + +- **icon**: The name of the icon from the registered icon pack. +- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include: + - `square` + - `circle` + - `rounded` +- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed. +- **pos**: The position of the label. If not defined label will default to bottom of icon. Possible values are: + - `t` + - `b` +- **h**: The height of the icon. If not defined this will default to 48 which is minimum. + +### Image Shape + +You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows: + +``` +flowchart TD + A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" } +``` + +#### Parameters + +- **img**: The URL of the image to be displayed. +- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed. +- **pos**: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are: + - `t` + - `b` +- **w**: The width of the image. If not defined, this will default to the natural width of the image. +- **h**: The height of the image. If not defined, this will default to the natural height of the image. +- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the width (`w`) accordingly to the height (`h`). If not defined, this will default to `off` Possible values are: + - `on` + - `off` + +If you want to resize an image, but keep the same aspect ratio, set `h`, and set `constraint: on` to constrain the aspect ratio. E.g. + +```mermaid-example +flowchart TD + %% My image with a constrained aspect ratio + A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" } +``` + +```mermaid +flowchart TD + %% My image with a constrained aspect ratio + A@{ img: "https://mermaid.js.org/favicon.svg", label: "My example image label", pos: "t", h: 60, constraint: "on" } +``` + +## Links between nodes + +Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link. + +### A link with arrow head + +```mermaid-example +flowchart LR + A-->B +``` + +```mermaid +flowchart LR + A-->B +``` + +### An open link + +```mermaid-example +flowchart LR + A --- B +``` + +```mermaid +flowchart LR + A --- B +``` + +### Text on links + +```mermaid-example +flowchart LR + A-- This is the text! ---B +``` + +```mermaid +flowchart LR + A-- This is the text! ---B +``` + +or + +```mermaid-example +flowchart LR + A---|This is the text|B +``` + +```mermaid +flowchart LR + A---|This is the text|B +``` + +### A link with arrow head and text + +```mermaid-example +flowchart LR + A-->|text|B +``` + +```mermaid +flowchart LR + A-->|text|B +``` + +or + +```mermaid-example +flowchart LR + A-- text -->B +``` + +```mermaid +flowchart LR + A-- text -->B +``` + +### Dotted link + +```mermaid-example +flowchart LR + A-.->B; +``` + +```mermaid +flowchart LR + A-.->B; +``` + +### Dotted link with text + +```mermaid-example +flowchart LR + A-. text .-> B +``` + +```mermaid +flowchart LR + A-. text .-> B +``` + +### Thick link + +```mermaid-example +flowchart LR + A ==> B +``` + +```mermaid +flowchart LR + A ==> B +``` + +### Thick link with text + +```mermaid-example +flowchart LR + A == text ==> B +``` + +```mermaid +flowchart LR + A == text ==> B +``` + +### An invisible link + +This can be a useful tool in some instances where you want to alter the default positioning of a node. + +```mermaid-example +flowchart LR + A ~~~ B +``` + +```mermaid +flowchart LR + A ~~~ B +``` + +### Chaining of links + +It is possible declare many links in the same line as per below: + +```mermaid-example +flowchart LR + A -- text --> B -- text2 --> C +``` + +```mermaid +flowchart LR + A -- text --> B -- text2 --> C +``` + +It is also possible to declare multiple nodes links in the same line as per below: + +```mermaid-example +flowchart LR + a --> b & c--> d +``` + +```mermaid +flowchart LR + a --> b & c--> d +``` + +You can then describe dependencies in a very expressive way. Like the one-liner below: + +```mermaid-example +flowchart TB + A & B--> C & D +``` + +```mermaid +flowchart TB + A & B--> C & D +``` + +If you describe the same diagram using the basic syntax, it will take four lines. A +word of warning, one could go overboard with this making the flowchart harder to read in +markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. +This goes for expressive syntaxes as well. + +```mermaid-example +flowchart TB + A --> C + A --> D + B --> C + B --> D +``` + +```mermaid +flowchart TB + A --> C + A --> D + B --> C + B --> D +``` + +### Attaching an ID to Edges + +Mermaid now supports assigning IDs to edges, similar to how IDs and metadata can be attached to nodes. This feature lays the groundwork for more advanced styling, classes, and animation capabilities on edges. + +**Syntax:** + +To give an edge an ID, prepend the edge syntax with the ID followed by an `@` character. For example: + +```mermaid-example +flowchart LR + A e1@--> B +``` + +```mermaid +flowchart LR + A e1@--> B +``` + +In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes. + +### Turning an Animation On + +Once you have assigned an ID to an edge, you can turn on animations for that edge by defining the edge’s properties: + +```mermaid-example +flowchart LR + A e1@==> B + e1@{ animate: true } +``` + +```mermaid +flowchart LR + A e1@==> B + e1@{ animate: true } +``` + +This tells Mermaid that the edge `e1` should be animated. + +### Selecting Type of Animation + +In the initial version, two animation speeds are supported: `fast` and `slow`. Selecting a specific animation type is a shorthand for enabling animation and setting the animation speed in one go. + +**Examples:** + +```mermaid-example +flowchart LR + A e1@--> B + e1@{ animation: fast } +``` + +```mermaid +flowchart LR + A e1@--> B + e1@{ animation: fast } +``` + +This is equivalent to `{ animate: true, animation: fast }`. + +### Using classDef Statements for Animations + +You can also animate edges by assigning a class to them and then defining animation properties in a `classDef` statement. For example: + +```mermaid-example +flowchart LR + A e1@--> B + classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite; + class e1 animate +``` + +```mermaid +flowchart LR + A e1@--> B + classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite; + class e1 animate +``` + +In this snippet: + +- `e1@-->` creates an edge with ID `e1`. +- `classDef animate` defines a class named `animate` with styling and animation properties. +- `class e1 animate` applies the `animate` class to the edge `e1`. + +**Note on Escaping Commas:** +When setting the `stroke-dasharray` property, remember to escape commas as `\,` since commas are used as delimiters in Mermaid’s style definitions. + +## New arrow types + +There are new types of arrows supported: + +- circle edge +- cross edge + +### Circle edge example + +```mermaid-example +flowchart LR + A --o B +``` + +```mermaid +flowchart LR + A --o B +``` + +### Cross edge example + +```mermaid-example +flowchart LR + A --x B +``` + +```mermaid +flowchart LR + A --x B +``` + +## Multi directional arrows + +There is the possibility to use multidirectional arrows. + +```mermaid-example +flowchart LR + A o--o B + B <--> C + C x--x D +``` + +```mermaid +flowchart LR + A o--o B + B <--> C + C x--x D +``` + +### Minimum length of a link + +Each node in the flowchart is ultimately assigned to a rank in the rendered +graph, i.e. to a vertical or horizontal level (depending on the flowchart +orientation), based on the nodes to which it is linked. By default, links +can span any number of ranks, but you can ask for any link to be longer +than the others by adding extra dashes in the link definition. + +In the following example, two extra dashes are added in the link from node _B_ +to node _E_, so that it spans two more ranks than regular links: + +```mermaid-example +flowchart TD + A[Start] --> B{Is it?} + B -->|Yes| C[OK] + C --> D[Rethink] + D --> B + B ---->|No| E[End] +``` + +```mermaid +flowchart TD + A[Start] --> B{Is it?} + B -->|Yes| C[OK] + C --> D[Rethink] + D --> B + B ---->|No| E[End] +``` + +> **Note** Links may still be made longer than the requested number of ranks +> by the rendering engine to accommodate other requests. + +When the link label is written in the middle of the link, the extra dashes must +be added on the right side of the link. The following example is equivalent to +the previous one: + +```mermaid-example +flowchart TD + A[Start] --> B{Is it?} + B -- Yes --> C[OK] + C --> D[Rethink] + D --> B + B -- No ----> E[End] +``` + +```mermaid +flowchart TD + A[Start] --> B{Is it?} + B -- Yes --> C[OK] + C --> D[Rethink] + D --> B + B -- No ----> E[End] +``` + +For dotted or thick links, the characters to add are equals signs or dots, +as summed up in the following table: + +| Length | 1 | 2 | 3 | +| ----------------- | :----: | :-----: | :------: | +| Normal | `---` | `----` | `-----` | +| Normal with arrow | `-->` | `--->` | `---->` | +| Thick | `===` | `====` | `=====` | +| Thick with arrow | `==>` | `===>` | `====>` | +| Dotted | `-.-` | `-..-` | `-...-` | +| Dotted with arrow | `-.->` | `-..->` | `-...->` | + +## Special characters that break syntax + +It is possible to put text within quotes in order to render more troublesome characters. As in the example below: + +```mermaid-example +flowchart LR + id1["This is the (text) in the box"] +``` + +```mermaid +flowchart LR + id1["This is the (text) in the box"] +``` + +### Entity codes to escape characters + +It is possible to escape characters using the syntax exemplified here. + +```mermaid-example + flowchart LR + A["A double quote:#quot;"] --> B["A dec char:#9829;"] +``` + +```mermaid + flowchart LR + A["A double quote:#quot;"] --> B["A dec char:#9829;"] +``` + +Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names. + +## Subgraphs + +``` +subgraph title + graph definition +end +``` + +An example below: + +```mermaid-example +flowchart TB + c1-->a2 + subgraph one + a1-->a2 + end + subgraph two + b1-->b2 + end + subgraph three + c1-->c2 + end +``` + +```mermaid +flowchart TB + c1-->a2 + subgraph one + a1-->a2 + end + subgraph two + b1-->b2 + end + subgraph three + c1-->c2 + end +``` + +You can also set an explicit id for the subgraph. + +```mermaid-example +flowchart TB + c1-->a2 + subgraph ide1 [one] + a1-->a2 + end +``` + +```mermaid +flowchart TB + c1-->a2 + subgraph ide1 [one] + a1-->a2 + end +``` + +### flowcharts + +With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below. + +```mermaid-example +flowchart TB + c1-->a2 + subgraph one + a1-->a2 + end + subgraph two + b1-->b2 + end + subgraph three + c1-->c2 + end + one --> two + three --> two + two --> c2 +``` + +```mermaid +flowchart TB + c1-->a2 + subgraph one + a1-->a2 + end + subgraph two + b1-->b2 + end + subgraph three + c1-->c2 + end + one --> two + three --> two + two --> c2 +``` + +### Direction in subgraphs + +With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example. + +```mermaid-example +flowchart LR + subgraph TOP + direction TB + subgraph B1 + direction RL + i1 -->f1 + end + subgraph B2 + direction BT + i2 -->f2 + end + end + A --> TOP --> B + B1 --> B2 +``` + +```mermaid +flowchart LR + subgraph TOP + direction TB + subgraph B1 + direction RL + i1 -->f1 + end + subgraph B2 + direction BT + i2 -->f2 + end + end + A --> TOP --> B + B1 --> B2 +``` + +#### Limitation + +If any of a subgraph's nodes are linked to the outside, subgraph direction will be ignored. Instead the subgraph will inherit the direction of the parent graph: + +```mermaid-example +flowchart LR + subgraph subgraph1 + direction TB + top1[top] --> bottom1[bottom] + end + subgraph subgraph2 + direction TB + top2[top] --> bottom2[bottom] + end + %% ^ These subgraphs are identical, except for the links to them: + + %% Link *to* subgraph1: subgraph1 direction is maintained + outside --> subgraph1 + %% Link *within* subgraph2: + %% subgraph2 inherits the direction of the top-level graph (LR) + outside ---> top2 +``` + +```mermaid +flowchart LR + subgraph subgraph1 + direction TB + top1[top] --> bottom1[bottom] + end + subgraph subgraph2 + direction TB + top2[top] --> bottom2[bottom] + end + %% ^ These subgraphs are identical, except for the links to them: + + %% Link *to* subgraph1: subgraph1 direction is maintained + outside --> subgraph1 + %% Link *within* subgraph2: + %% subgraph2 inherits the direction of the top-level graph (LR) + outside ---> top2 +``` + +## Markdown Strings + +The "Markdown Strings" feature enhances flowcharts and 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 +--- +config: + htmlLabels: false +--- +flowchart LR +subgraph "One" + a("`The **cat** + in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}} +end +subgraph "`**Two**`" + c("`The **cat** + in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog") +end +``` + +```mermaid +--- +config: + htmlLabels: false +--- +flowchart LR +subgraph "One" + a("`The **cat** + in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}} +end +subgraph "`**Two**`" + c("`The **cat** + in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog") +end +``` + +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 `
` 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 `
` tag. + +This feature is applicable to node labels, edge labels, and subgraph labels. + +The auto wrapping can be disabled by using + +``` +--- +config: + markdownAutoWrap: false +--- +graph LR +``` + +## Interaction + +It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. + +> **Note** +> This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. + +``` +click nodeId callback +click nodeId call callback() +``` + +- nodeId is the id of the node +- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. + +Examples of tooltip usage below: + +```html + +``` + +The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`. + +```mermaid-example +flowchart LR + A-->B + B-->C + C-->D + click A callback "Tooltip for a callback" + click B "https://www.github.com" "This is a tooltip for a link" + click C call callback() "Tooltip for a callback" + click D href "https://www.github.com" "This is a tooltip for a link" +``` + +```mermaid +flowchart LR + A-->B + B-->C + C-->D + click A callback "Tooltip for a callback" + click B "https://www.github.com" "This is a tooltip for a link" + click C call callback() "Tooltip for a callback" + click D href "https://www.github.com" "This is a tooltip for a link" +``` + +> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. + +?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/). + +Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): + +```mermaid-example +flowchart LR + A-->B + B-->C + C-->D + D-->E + click A "https://www.github.com" _blank + click B "https://www.github.com" "Open this in a new tab" _blank + click C href "https://www.github.com" _blank + click D href "https://www.github.com" "Open this in a new tab" _blank +``` + +```mermaid +flowchart LR + A-->B + B-->C + C-->D + D-->E + click A "https://www.github.com" _blank + click B "https://www.github.com" "Open this in a new tab" _blank + click C href "https://www.github.com" _blank + click D href "https://www.github.com" "Open this in a new tab" _blank +``` + +Beginner's tip—a full example using interactive links in a html context: + +```html + + 
+    flowchart LR
+        A-->B
+        B-->C
+        C-->D
+        click A callback "Tooltip"
+        click B "https://www.github.com" "This is a link"
+        click C call callback() "Tooltip"
+        click D href "https://www.github.com" "This is a link"
+
+ + + +``` + +### Comments + +Comments can be entered within a flow diagram, 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 flow syntax + +```mermaid-example +flowchart LR +%% this is a comment A -- text --> B{node} + A -- text --> B -- text2 --> C +``` + +```mermaid +flowchart LR +%% this is a comment A -- text --> B{node} + A -- text --> B -- text2 --> C +``` + +## Styling and classes + +### Styling links + +It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links +have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required. +Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links. +In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph: + +``` +linkStyle 3 stroke:#ff3,stroke-width:4px,color:red; +``` + +It is also possible to add style to multiple links in a single statement, by separating link numbers with commas: + +``` +linkStyle 1,2,7 color:blue; +``` + +### Styling line curves + +It is possible to style the type of curve used for lines between items, if the default method does not meet your needs. +Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`, +`natural`, `step`, `stepAfter`, and `stepBefore`. + +For a full list of available curves, including an explanation of custom curves, refer to +the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. + +Line styling can be achieved in two ways: + +1. Change the curve style of all the lines +2. Change the curve style of a particular line + +#### Diagram level curve style + +In this example, a left-to-right graph uses the `stepBefore` curve style: + +``` +--- +config: + flowchart: + curve: stepBefore +--- +graph LR +``` + +#### Edge level curve style using Edge IDs (v11.10.0+) + +You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax: + +```mermaid-example +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```mermaid +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```info +Any edge curve style modified at the edge level overrides the diagram level style. +``` + +```info +If the same edge is modified multiple times the last modification will be rendered. +``` + +### 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 +flowchart LR + id1(Start)-->id2(Stop) + 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 +flowchart LR + id1(Start)-->id2(Stop) + style id1 fill:#f9f,stroke:#333,stroke-width:4px + style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 +``` + +#### 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; +``` + +Also, it is possible to define style to 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; +``` + +A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: + +```mermaid-example +flowchart LR + A:::someclass --> B + classDef someclass fill:#f96 +``` + +```mermaid +flowchart LR + A:::someclass --> B + classDef someclass fill:#f96 +``` + +This form can be used when declaring multiple links between nodes: + +```mermaid-example +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + +```mermaid +flowchart LR + A:::foo & B:::bar --> C:::foobar + classDef foo stroke:#f00 + classDef bar stroke:#0f0 + classDef foobar stroke:#00f +``` + +### CSS classes + +It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example +below: + +**Example style** + +```html + +``` + +**Example definition** + +```mermaid-example +flowchart LR + A-->B[AAABBB] + B-->D + class A cssClass +``` + +```mermaid +flowchart LR + A-->B[AAABBB] + B-->D + class A cssClass +``` + +### 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; +``` + +## Basic support for fontawesome + +It is possible to add icons from fontawesome. + +The icons are accessed via the syntax fa:#icon class name#. + +```mermaid-example +flowchart TD + B["fa:fa-twitter for peace"] + B-->C[fa:fa-ban forbidden] + B-->D(fa:fa-spinner) + B-->E(A fa:fa-camera-retro perhaps?) +``` + +```mermaid +flowchart TD + B["fa:fa-twitter for peace"] + B-->C[fa:fa-ban forbidden] + B-->D(fa:fa-spinner) + B-->E(A fa:fa-camera-retro perhaps?) +``` + +There are two ways to display these FontAwesome icons: + +### Register FontAwesome icon packs (v11.7.0+) + +You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md). + +Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`. + +> **Note** +> Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered. + +### Register FontAwesome CSS + +Mermaid supports Font Awesome if the CSS is included on the website. +Mermaid does not have any restriction on the version of Font Awesome that can be used. + +Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website. + +Adding this snippet in the `` would add support for Font Awesome v6.5.1 + +```html + +``` + +### Custom icons + +It is possible to use custom icons served from Font Awesome as long as the website imports the corresponding kit. + +Note that this is currently a paid feature from Font Awesome. + +For custom icons, you need to use the `fak` prefix. + +**Example** + +``` +flowchart TD + B[fa:fa-twitter] %% standard icon + B-->E(fak:fa-custom-icon-name) %% custom icon +``` + +And trying to render it + +```mermaid-example +flowchart TD + B["fa:fa-twitter for peace"] + B-->C["fab:fa-truck-bold a custom icon"] +``` + +```mermaid +flowchart TD + B["fa:fa-twitter for peace"] + B-->C["fab:fa-truck-bold a custom icon"] +``` + +## Graph declarations with spaces between vertices and link and without semicolon + +- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph. + +- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability. + +Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. + +```mermaid-example +flowchart LR + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +``` + +```mermaid +flowchart LR + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +``` + +## Configuration + +### Renderer + +The layout of the diagram is done with the renderer. The default renderer is dagre. + +Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams. + +The _elk_ renderer is an experimental feature. +You can change the renderer to elk by adding this directive: + +``` +config: + flowchart: + defaultRenderer: "elk" +``` + +> **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. + +### Width + +It is possible to adjust the width of the rendered flowchart. + +This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page. +mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object. + +```javascript +mermaid.flowchartConfig = { + width: 100% +} +``` + + diff --git a/claude-skills-reference/mermaid/references/gantt.md b/claude-skills-reference/mermaid/references/gantt.md new file mode 100644 index 0000000..3a42f04 --- /dev/null +++ b/claude-skills-reference/mermaid/references/gantt.md @@ -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 ![](./img/Gantt-excluded-days-within.png) + +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 ![](./img/Gantt-long-weekend-look.png) + +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 [[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 ` syntax. + +| Metadata syntax | Start date | End date | ID | +| ---------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -------- | +| `, , ` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` | +| `, , ` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` | +| `, after , ` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` | +| `, after , ` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` | +| `, , until ` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | `taskID` | +| `, after , until ` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | `taskID` | +| `, ` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a | +| `, ` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a | +| `after , ` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a | +| `after , ` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a | +| `, until ` | `startdate` as interpreted using `dateformat` | Start date of previously specified task `otherTaskID` | n/a | +| `after , until ` | End date of previously specified task `otherTaskID` | Start date of previously specified task `otherTaskID` | n/a | +| `` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a | +| `` | End date of preceding task | Start date + `length` | n/a | +| `until ` | 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: + +### 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: + +### 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: + +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 + + 
+    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()
+
+ + + +``` + +## 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 +``` + + diff --git a/claude-skills-reference/mermaid/references/gitgraph.md b/claude-skills-reference/mermaid/references/gitgraph.md new file mode 100644 index 0000000..ffd8df3 --- /dev/null +++ b/claude-skills-reference/mermaid/references/gitgraph.md @@ -0,0 +1,2138 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md). + +# GitGraph Diagrams + +> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches. + +These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works. + +Mermaid can render Git diagrams + +```mermaid-example +--- +title: Example Git diagram +--- +gitGraph + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit +``` + +```mermaid +--- +title: Example Git diagram +--- +gitGraph + commit + commit + branch develop + checkout develop + commit + commit + checkout main + merge develop + commit + commit +``` + +In Mermaid, we support the basic git operations like: + +- _commit_ : Representing a new commit on the current branch. +- _branch_ : To create & switch to a new branch, setting it as the current branch. +- _checkout_ : To checking out an existing branch and setting it as the current branch. +- _merge_ : To merge an existing branch onto the current branch. + +With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly. +Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid. + +**NOTE**: `checkout` and `switch` can be used interchangeably. + +## Syntax + +Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command. + +First thing you do is to declare your diagram type using the **gitgraph** keyword. This `gitgraph` keyword, tells Mermaid that you wish to draw a gitgraph, and parse the diagram code accordingly. + +Each gitgraph, is initialized with **_main_** branch. So unless you create a different branch, by-default the commits will go to the main branch. This is driven with how git works, where in the beginning you always start with the main branch (formerly called as **_master_** branch). And by-default, `main` branch is set as your **_current branch_**. + +You make use of **_commit_** keyword to register a commit on the current branch. Let see how this works: + +A simple gitgraph showing three commits on the default (**_main_**) branch: + +```mermaid-example + gitGraph + commit + commit + commit +``` + +```mermaid + gitGraph + commit + commit + commit +``` + +If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid. + +### Adding custom commit id + +For a given commit you may specify a custom ID at the time of declaring it using the `id` attribute, followed by `:` and your custom value within a `""` quote. For example: `commit id: "your_custom_id"` + +Let us see how this works with the help of the following diagram: + +```mermaid-example + gitGraph + commit id: "Alpha" + commit id: "Beta" + commit id: "Gamma" +``` + +```mermaid + gitGraph + commit id: "Alpha" + commit id: "Beta" + commit id: "Gamma" +``` + +In this example, we have given our custom IDs to the commits. + +### Modifying commit type + +In Mermaid, a commit can be of three type, which render a bit different in the diagram. These types are: + +- `NORMAL` : Default commit type. Represented by a solid circle in the diagram +- `REVERSE` : To emphasize a commit as a reverse commit. Represented by a crossed solid circle in the diagram. +- `HIGHLIGHT` : To highlight a particular commit in the diagram. Represented by a filled rectangle in the diagram. + +For a given commit you may specify its type at the time of declaring it using the `type` attribute, followed by `:` and the required type option discussed above. For example: `commit type: HIGHLIGHT` + +NOTE: If no commit type is specified, `NORMAL` is picked as default. + +Let us see how these different commit type look with the help of the following diagram: + +```mermaid-example + gitGraph + commit id: "Normal" + commit + commit id: "Reverse" type: REVERSE + commit + commit id: "Highlight" type: HIGHLIGHT + commit +``` + +```mermaid + gitGraph + commit id: "Normal" + commit + commit id: "Reverse" type: REVERSE + commit + commit id: "Highlight" type: HIGHLIGHT + commit +``` + +In this example, we have specified different types to each commit. Also, see how we have included both `id` and `type` together at the time of declaring our commits. + +### Adding Tags + +For a given commit you may decorate it as a **tag**, similar to the concept of tags or release version in git world. +You can attach a custom tag at the time of declaring a commit using the `tag` attribute, followed by `:` and your custom value within `""` quote. For example: `commit tag: "your_custom_tag"` + +Let us see how this works with the help of the following diagram: + +```mermaid-example + gitGraph + commit + commit id: "Normal" tag: "v1.0.0" + commit + commit id: "Reverse" type: REVERSE tag: "RC_1" + commit + commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" + commit +``` + +```mermaid + gitGraph + commit + commit id: "Normal" tag: "v1.0.0" + commit + commit id: "Reverse" type: REVERSE tag: "RC_1" + commit + commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" + commit +``` + +In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like. + +### Create a new branch + +In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. A branch name that could be confused for a keyword must be quoted within `""`. Usage examples: `branch develop`, `branch "cherry-pick"` + +When Mermaid, reads the `branch` keyword, it creates a new branch and sets it as the current branch. Equivalent to you creating a new branch and checking it out in Git world. + +Let see this in an example: + +```mermaid-example + gitGraph + commit + commit + branch develop + commit + commit + commit +``` + +```mermaid + gitGraph + commit + commit + branch develop + commit + commit + commit +``` + +In this example, see how we started with default `main` branch, and pushed two commits on that. +Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch. + +### Checking out an existing branch + +In Mermaid, in order to switch to an existing branch, you make use of the `checkout` keyword. You also need to provide a name of an existing branch. If no branch is found with the given name, it will result in console error. Usage example: `checkout develop` + +When Mermaid, reads the `checkout` keyword, it finds the given branch and sets it as the current branch. Equivalent to checking out a branch in the Git world. + +Let see modify our previous example: + +```mermaid-example + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit +``` + +```mermaid + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit +``` + +In this example, see how we started with default `main` branch, and pushed two commits on that. +Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. +After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`. + +### Merging two branches + +In Mermaid, in order to merge or join to an existing branch, you make use of the `merge` keyword. You also need to provide the name of an existing branch to merge from. If no branch is found with the given name, it will result in console error. Also, you can only merge two separate branches, and cannot merge a branch with itself. In such case an error is throw. + +Usage example: `merge develop` + +When Mermaid, reads the `merge` keyword, it finds the given branch and its head commit (the last commit on that branch), and joins it with the head commit on the **current branch**. Each merge results in a **_merge commit_**, represented in the diagram with **filled double circle**. + +Let us modify our previous example to merge our two branches: + +```mermaid-example + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +```mermaid + gitGraph + commit + commit + branch develop + commit + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +In this example, see how we started with default `main` branch, and pushed two commits on that. +Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. +After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`. +After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit. +Since the current branch at this point is still `main`, the last two commits are registered against that. + +You can also decorate your merge with similar attributes as you did for the commit using: + +- `id`--> To override the default ID with custom ID +- `tag`--> To add a custom tag to your merge commit +- `type`--> To override the default shape of merge commit. Here you can use other commit type mentioned earlier. + +And you can choose to use none, some or all of these attributes together. +For example: `merge develop id: "my_custom_id" tag: "my_custom_tag" type: REVERSE` + +Let us see how this works with the help of the following diagram: + +```mermaid-example + gitGraph + commit id: "1" + commit id: "2" + branch nice_feature + checkout nice_feature + commit id: "3" + checkout main + commit id: "4" + checkout nice_feature + branch very_nice_feature + checkout very_nice_feature + commit id: "5" + checkout main + commit id: "6" + checkout nice_feature + commit id: "7" + checkout main + merge nice_feature id: "customID" tag: "customTag" type: REVERSE + checkout very_nice_feature + commit id: "8" + checkout main + commit id: "9" +``` + +```mermaid + gitGraph + commit id: "1" + commit id: "2" + branch nice_feature + checkout nice_feature + commit id: "3" + checkout main + commit id: "4" + checkout nice_feature + branch very_nice_feature + checkout very_nice_feature + commit id: "5" + checkout main + commit id: "6" + checkout nice_feature + commit id: "7" + checkout main + merge nice_feature id: "customID" tag: "customTag" type: REVERSE + checkout very_nice_feature + commit id: "8" + checkout main + commit id: "9" +``` + +### Cherry Pick commit from another branch + +Similar to how 'git' allows you to cherry-pick a commit from **another branch** onto the **current** branch, Mermaid also supports this functionality. You can also cherry-pick a commit from another branch using the `cherry-pick` keyword. + +To use the `cherry-pick` keyword, you must specify the id using the `id` attribute, followed by `:` and your desired commit id within a `""` quote. For example: + +`cherry-pick id: "your_custom_id"` + +Here, a new commit representing the cherry-pick is created on the current branch, and is visually highlighted in the diagram with a **cherry** and a tag depicting the commit id from which it is cherry-picked from. + +A few important rules to note here are: + +1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above. +2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch. +3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw. +4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown. +5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked. + +Let see an example: + +```mermaid-example + gitGraph + commit id: "ZERO" + branch develop + branch release + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + merge develop id:"MERGE" + commit id:"TWO" + checkout release + cherry-pick id:"MERGE" parent:"B" + commit id:"THREE" + checkout develop + commit id:"C" +``` + +```mermaid + gitGraph + commit id: "ZERO" + branch develop + branch release + commit id:"A" + checkout main + commit id:"ONE" + checkout develop + commit id:"B" + checkout main + merge develop id:"MERGE" + commit id:"TWO" + checkout release + cherry-pick id:"MERGE" parent:"B" + commit id:"THREE" + checkout develop + commit id:"C" +``` + +## GitGraph specific configuration options + +In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: + +- `showBranches` : Boolean, default is `true`. If set to `false`, the branches are not shown in the diagram. +- `showCommitLabel` : Boolean, default is `true`. If set to `false`, the commit labels are not shown in the diagram. +- `mainBranchName` : String, default is `main`. The name of the default/root branch. +- `mainBranchOrder` : Position of the main branch in the list of branches. default is `0`, meaning, by default `main` branch is the first in the order. +- `parallelCommits`: Boolean, default is `false`. If set to `true`, commits x distance away from the parent are shown at the same level in the diagram. + +Let's look at them one by one. + +## Hiding Branch names and lines + +Sometimes you may want to hide the branch names and lines from the diagram. You can do this by using the `showBranches` keyword. By default its value is `true`. You can set it to `false` using directives. + +Usage example: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: false +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: false +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +## Commit labels Layout: Rotated or Horizontal + +Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels. + +The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels. + +You can change the layout of the commit labels by using the `rotateCommitLabel` keyword in the directive. It defaults to `true`, which means the commit labels are rotated. + +Usage example: Rotated commit labels + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + rotateCommitLabel: true +--- +gitGraph + commit id: "feat(api): ..." + commit id: "a" + commit id: "b" + commit id: "fix(client): .extra long label.." + branch c2 + commit id: "feat(modules): ..." + commit id: "test(client): ..." + checkout main + commit id: "fix(api): ..." + commit id: "ci: ..." + branch b1 + commit + branch b2 + commit +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + rotateCommitLabel: true +--- +gitGraph + commit id: "feat(api): ..." + commit id: "a" + commit id: "b" + commit id: "fix(client): .extra long label.." + branch c2 + commit id: "feat(modules): ..." + commit id: "test(client): ..." + checkout main + commit id: "fix(api): ..." + commit id: "ci: ..." + branch b1 + commit + branch b2 + commit +``` + +Usage example: Horizontal commit labels + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + rotateCommitLabel: false +--- +gitGraph + commit id: "feat(api): ..." + commit id: "a" + commit id: "b" + commit id: "fix(client): .extra long label.." + branch c2 + commit id: "feat(modules): ..." + commit id: "test(client): ..." + checkout main + commit id: "fix(api): ..." + commit id: "ci: ..." + branch b1 + commit + branch b2 + commit +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + rotateCommitLabel: false +--- +gitGraph + commit id: "feat(api): ..." + commit id: "a" + commit id: "b" + commit id: "fix(client): .extra long label.." + branch c2 + commit id: "feat(modules): ..." + commit id: "test(client): ..." + checkout main + commit id: "fix(api): ..." + commit id: "ci: ..." + branch b1 + commit + branch b2 + commit +``` + +## Hiding commit labels + +Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives. + +Usage example: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: false + showCommitLabel: false +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: false + showCommitLabel: false +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +## Customizing main branch name + +Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives. + +Usage example: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: true + showCommitLabel: true + mainBranchName: 'MetroLine1' +--- + gitGraph + commit id:"NewYork" + commit id:"Dallas" + branch MetroLine2 + commit id:"LosAngeles" + commit id:"Chicago" + commit id:"Houston" + branch MetroLine3 + commit id:"Phoenix" + commit type: HIGHLIGHT id:"Denver" + commit id:"Boston" + checkout MetroLine1 + commit id:"Atlanta" + merge MetroLine3 + commit id:"Miami" + commit id:"Washington" + merge MetroLine2 tag:"MY JUNCTION" + commit id:"Boston" + commit id:"Detroit" + commit type:REVERSE id:"SanFrancisco" +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: true + showCommitLabel: true + mainBranchName: 'MetroLine1' +--- + gitGraph + commit id:"NewYork" + commit id:"Dallas" + branch MetroLine2 + commit id:"LosAngeles" + commit id:"Chicago" + commit id:"Houston" + branch MetroLine3 + commit id:"Phoenix" + commit type: HIGHLIGHT id:"Denver" + commit id:"Boston" + checkout MetroLine1 + commit id:"Atlanta" + merge MetroLine3 + commit id:"Miami" + commit id:"Washington" + merge MetroLine2 tag:"MY JUNCTION" + commit id:"Boston" + commit id:"Detroit" + commit type:REVERSE id:"SanFrancisco" +``` + +Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`. + +## Customizing branch ordering + +In Mermaid, by default the branches are shown in the order of their definition or appearance in the diagram code. + +Sometimes you may want to customize the order of the branches. You can do this by using the `order` keyword next the branch definition. You can set it to a positive number. + +Mermaid follows the given precedence order of the `order` keyword. + +- Main branch is always shown first as it has default order value of `0`. (unless its order is modified and changed from `0` using the `mainBranchOrder` keyword in the config) +- Next, All branches without an `order` are shown in the order of their appearance in the diagram code. +- Next, All branches with an `order` are shown in the order of their `order` value. + +To fully control the order of all the branches, you must define `order` for all the branches. + +Usage example: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: true + showCommitLabel: true +--- + gitGraph + commit + branch test1 order: 3 + branch test2 order: 2 + branch test3 order: 1 + +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: true + showCommitLabel: true +--- + gitGraph + commit + branch test1 order: 3 + branch test2 order: 2 + branch test3 order: 1 + +``` + +Look at the diagram, all the branches are following the order defined. + +Usage example: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: true + showCommitLabel: true + mainBranchOrder: 2 +--- + gitGraph + commit + branch test1 order: 3 + branch test2 + branch test3 + branch test4 order: 1 + +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'base' + gitGraph: + showBranches: true + showCommitLabel: true + mainBranchOrder: 2 +--- + gitGraph + commit + branch test1 order: 3 + branch test2 + branch test3 + branch test4 order: 1 + +``` + +Look at the diagram, here, all the branches without a specified order are drawn in their order of definition. +Then, `test4` branch is drawn because the order of `1`. +Then, `main` branch is drawn because the order of `2`. +And, lastly `test1`is drawn because the order of `3`. + +NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch is not drawn in the beginning, instead follows the ordering. + +Here, we have changed the default main branch name to `MetroLine1`. + +## Orientation (v10.3.0+) + +Mermaid supports three graph orientations: **Left-to-Right** (default), **Top-to-Bottom**, and **Bottom-to-Top**. + +You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)), `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) or `BT:` (for [**Bottom-to-Top**](#bottom-to-top-bt)) after `gitGraph`. + +### Left to Right (default, `LR:`) + +In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another. + +However, you can set this explicitly with `LR:` after `gitGraph`. + +Usage example: + +```mermaid-example + gitGraph LR: + commit + commit + branch develop + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +```mermaid + gitGraph LR: + commit + commit + branch develop + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +### Top to Bottom (`TB:`) + +In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side. + +To orient the graph this way, you need to add `TB:` after gitGraph. + +Usage example: + +```mermaid-example + gitGraph TB: + commit + commit + branch develop + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +```mermaid + gitGraph TB: + commit + commit + branch develop + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +### Bottom to Top (`BT:`) (v11.0.0+) + +In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side. + +To orient the graph this way, you need to add `BT:` after gitGraph. + +Usage example: + +```mermaid-example + gitGraph BT: + commit + commit + branch develop + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +```mermaid + gitGraph BT: + commit + commit + branch develop + commit + commit + checkout main + commit + commit + merge develop + commit + commit +``` + +## Parallel commits (v10.8.0+) + +Commits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag. + +### Temporal Commits (default, `parallelCommits: false`) + +```mermaid-example +--- +config: + gitGraph: + parallelCommits: false +--- +gitGraph: + commit + branch develop + commit + commit + checkout main + commit + commit +``` + +```mermaid +--- +config: + gitGraph: + parallelCommits: false +--- +gitGraph: + commit + branch develop + commit + commit + checkout main + commit + commit +``` + +### Parallel commits (`parallelCommits: true`) + +```mermaid-example +--- +config: + gitGraph: + parallelCommits: true +--- +gitGraph: + commit + branch develop + commit + commit + checkout main + commit + commit +``` + +```mermaid +--- +config: + gitGraph: + parallelCommits: true +--- +gitGraph: + commit + branch develop + commit + commit + checkout main + commit + commit +``` + +## 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' +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'base' +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +### Forest Theme + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'forest' +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'forest' +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +### Default Theme + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' +--- + gitGraph + commit type:HIGHLIGHT + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' +--- + gitGraph + commit type:HIGHLIGHT + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +### Dark Theme + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'dark' +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'dark' +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +### Neutral Theme + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'neutral' +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'neutral' +--- + gitGraph + commit + branch hotfix + checkout hotfix + commit + branch develop + checkout develop + commit id:"ash" tag:"abc" + branch featureB + checkout featureB + commit type:HIGHLIGHT + checkout main + checkout hotfix + commit type:NORMAL + checkout develop + commit type:REVERSE + checkout featureB + commit + checkout main + merge hotfix + checkout featureB + commit + checkout develop + branch featureA + commit + checkout develop + merge hotfix + checkout featureA + commit + checkout featureB + commit + checkout develop + merge featureA + branch release + checkout release + commit + checkout main + commit + checkout release + merge main + checkout develop + merge release +``` + +## Customize using Theme Variables + +Mermaid allows you to customize your diagram using theme variables which govern the look and feel of various elements of the diagram. + +For understanding let us take a sample diagram with theme `default`, the default values of the theme variables is picked automatically from the theme. Later on we will see how to override the default values of the theme variables. + +See how the default theme is used to set the colors for the branches: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit +``` + +> #### IMPORTANT: +> +> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'. +> _More on this in the next section. See examples on **Customizing branch label colors** below_ + +### Customizing branch colors + +You can customize the branch colors using the `git0` to `git7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `git0` variable will drive the value of the first branch, `git1` will drive the value of the second branch and so on. + +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 `git0` to `git3` variables: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + 'git0': '#ff0000' + 'git1': '#00ff00' + 'git2': '#0000ff' + 'git3': '#ff00ff' + 'git4': '#00ffff' + 'git5': '#ffff00' + 'git6': '#ff00ff' + 'git7': '#00ffff' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + 'git0': '#ff0000' + 'git1': '#00ff00' + 'git2': '#0000ff' + 'git3': '#ff00ff' + 'git4': '#00ffff' + 'git5': '#ffff00' + 'git6': '#ff00ff' + 'git7': '#00ffff' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +See how the branch colors are changed to the values specified in the theme variables. + +### Customizing branch label colors + +You can customize the branch label colors using the `gitBranchLabel0` to `gitBranchLabel7` theme variables. Mermaid allows you to set the colors for up-to 8 branches, where `gitBranchLabel0` variable will drive the value of the first branch label, `gitBranchLabel1` will drive the value of the second branch label and so on. + +Lets see how the default theme is used to set the colors for the branch labels: + +Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + 'gitBranchLabel0': '#ffffff' + 'gitBranchLabel1': '#ffffff' + 'gitBranchLabel2': '#ffffff' + 'gitBranchLabel3': '#ffffff' + 'gitBranchLabel4': '#ffffff' + 'gitBranchLabel5': '#ffffff' + 'gitBranchLabel6': '#ffffff' + 'gitBranchLabel7': '#ffffff' + 'gitBranchLabel8': '#ffffff' + 'gitBranchLabel9': '#ffffff' +--- + gitGraph + checkout main + branch branch1 + branch branch2 + branch branch3 + branch branch4 + branch branch5 + branch branch6 + branch branch7 + branch branch8 + branch branch9 + checkout branch1 + commit +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + 'gitBranchLabel0': '#ffffff' + 'gitBranchLabel1': '#ffffff' + 'gitBranchLabel2': '#ffffff' + 'gitBranchLabel3': '#ffffff' + 'gitBranchLabel4': '#ffffff' + 'gitBranchLabel5': '#ffffff' + 'gitBranchLabel6': '#ffffff' + 'gitBranchLabel7': '#ffffff' + 'gitBranchLabel8': '#ffffff' + 'gitBranchLabel9': '#ffffff' +--- + gitGraph + checkout main + branch branch1 + branch branch2 + branch branch3 + branch branch4 + branch branch5 + branch branch6 + branch branch7 + branch branch8 + branch branch9 + checkout branch1 + commit +``` + +Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**. + +### Customizing Commit colors + +You can customize commit using the `commitLabelColor` and `commitLabelBackground` theme variables for changes in the commit label color and background color respectively. + +Example: +Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + commitLabelColor: '#ff0000' + commitLabelBackground: '#00ff00' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + commitLabelColor: '#ff0000' + commitLabelBackground: '#00ff00' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +See how the commit label color and background color are changed to the values specified in the theme variables. + +### Customizing Commit Label Font Size + +You can customize commit using the `commitLabelFontSize` theme variables for changing in the font size of the commit label . + +Example: +Now let's override the default values for the `commitLabelFontSize` variable: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + commitLabelColor: '#ff0000' + commitLabelBackground: '#00ff00' + commitLabelFontSize: '16px' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + commitLabelColor: '#ff0000' + commitLabelBackground: '#00ff00' + commitLabelFontSize: '16px' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +See how the commit label font size changed. + +### Customizing Tag Label Font Size + +You can customize commit using the `tagLabelFontSize` theme variables for changing in the font size of the tag label . + +Example: +Now let's override the default values for the `tagLabelFontSize` variable: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + commitLabelColor: '#ff0000' + commitLabelBackground: '#00ff00' + tagLabelFontSize: '16px' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + commitLabelColor: '#ff0000' + commitLabelBackground: '#00ff00' + tagLabelFontSize: '16px' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +See how the tag label font size changed. + +### Customizing Tag colors + +You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively. +Example: +Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + tagLabelColor: '#ff0000' + tagLabelBackground: '#00ff00' + tagLabelBorder: '#0000ff' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + tagLabelColor: '#ff0000' + tagLabelBackground: '#00ff00' + tagLabelBorder: '#0000ff' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +See how the tag colors are changed to the values specified in the theme variables. + +### Customizing Highlight commit colors + +You can customize the highlight commit colors in relation to the branch it is on using the `gitInv0` to `gitInv7` theme variables. Mermaid allows you to set the colors for up-to 8 branches specific highlight commit, where `gitInv0` variable will drive the value of the first branch's highlight commits, `gitInv1` will drive the value of the second branch's highlight commit label and so on. + +Example: + +Now let's override the default values for the `git0` to `git3` variables: + +```mermaid-example +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + 'gitInv0': '#ff0000' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +```mermaid +--- +config: + logLevel: 'debug' + theme: 'default' + themeVariables: + 'gitInv0': '#ff0000' +--- + gitGraph + commit + branch develop + commit tag:"v1.0.0" + commit + checkout main + commit type: HIGHLIGHT + commit + merge develop + commit + branch featureA + commit + +``` + +See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`. diff --git a/claude-skills-reference/mermaid/references/kanban.md b/claude-skills-reference/mermaid/references/kanban.md new file mode 100644 index 0000000..718be1b --- /dev/null +++ b/claude-skills-reference/mermaid/references/kanban.md @@ -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. diff --git a/claude-skills-reference/mermaid/references/mindmap.md b/claude-skills-reference/mermaid/references/mindmap.md new file mode 100644 index 0000000..844b329 --- /dev/null +++ b/claude-skills-reference/mermaid/references/mindmap.md @@ -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
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
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
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
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 + +``` + +From version 9.4.0 you can simplify this code to: + +```html + +``` + +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. + + + +## 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) diff --git a/claude-skills-reference/mermaid/references/packet.md b/claude-skills-reference/mermaid/references/packet.md new file mode 100644 index 0000000..c42aecc --- /dev/null +++ b/claude-skills-reference/mermaid/references/packet.md @@ -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 `+` 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. + + diff --git a/claude-skills-reference/mermaid/references/pie.md b/claude-skills-reference/mermaid/references/pie.md new file mode 100644 index 0000000..fd5ec1d --- /dev/null +++ b/claude-skills-reference/mermaid/references/pie.md @@ -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` | diff --git a/claude-skills-reference/mermaid/references/quadrantChart.md b/claude-skills-reference/mermaid/references/quadrantChart.md new file mode 100644 index 0000000..160d70b --- /dev/null +++ b/claude-skills-reference/mermaid/references/quadrantChart.md @@ -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 --> ` both the left and right axis text will be rendered. +2. `x-axis ` 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 --> ` both the bottom and top axis text will be rendered. +2. `y-axis ` 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 ` determine what text will be rendered inside the top right quadrant. +2. `quadrant-2 ` determine what text will be rendered inside the top left quadrant. +3. `quadrant-3 ` determine what text will be rendered inside the bottom left quadrant. +4. `quadrant-4 ` 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 `: [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 +``` diff --git a/claude-skills-reference/mermaid/references/radar.md b/claude-skills-reference/mermaid/references/radar.md new file mode 100644 index 0000000..04f9543 --- /dev/null +++ b/claude-skills-reference/mermaid/references/radar.md @@ -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} +``` + + diff --git a/claude-skills-reference/mermaid/references/requirementDiagram.md b/claude-skills-reference/mermaid/references/requirementDiagram.md new file mode 100644 index 0000000..36420d9 --- /dev/null +++ b/claude-skills-reference/mermaid/references/requirementDiagram.md @@ -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 ``, 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: + +``` + user_defined_name { + id: user_defined_id + text: user_defined text + risk: + verifymethod: +} +``` + +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} - -> {name of destination} +``` + +or + +``` +{name of destination} <- - {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 +``` + + diff --git a/claude-skills-reference/mermaid/references/sankey.md b/claude-skills-reference/mermaid/references/sankey.md new file mode 100644 index 0000000..e981358 --- /dev/null +++ b/claude-skills-reference/mermaid/references/sankey.md @@ -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 + +``` + +### 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` + + diff --git a/claude-skills-reference/mermaid/references/sequenceDiagram.md b/claude-skills-reference/mermaid/references/sequenceDiagram.md new file mode 100644 index 0000000..ef46378 --- /dev/null +++ b/claude-skills-reference/mermaid/references/sequenceDiagram.md @@ -0,0 +1,1185 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sequenceDiagram.md](../../packages/mermaid/src/docs/syntax/sequenceDiagram.md). + +# Sequence diagrams + +> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. + +Mermaid can render sequence diagrams. + +```mermaid-example +sequenceDiagram + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +```mermaid +sequenceDiagram + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +> **Note** +> A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted. +> +> If unavoidable, one must use parentheses(), quotation marks "", or brackets {},\[], to enclose the word "end". i.e : (end), \[end], {end}. + +## 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 +sequenceDiagram + participant Alice + participant Bob + Bob->>Alice: Hi Alice + Alice->>Bob: Hi Bob +``` + +```mermaid +sequenceDiagram + participant Alice + participant Bob + Bob->>Alice: Hi Alice + Alice->>Bob: Hi Bob +``` + +### Actors + +If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below. + +```mermaid-example +sequenceDiagram + actor Alice + actor Bob + Alice->>Bob: Hi Bob + Bob->>Alice: Hi Alice +``` + +```mermaid +sequenceDiagram + actor Alice + actor Bob + Alice->>Bob: Hi Bob + Bob->>Alice: Hi Alice +``` + +### Boundary + +If you want to use the boundary symbol for a participant, use the JSON configuration syntax as shown below. + +```mermaid-example +sequenceDiagram + participant Alice@{ "type" : "boundary" } + participant Bob + Alice->>Bob: Request from boundary + Bob->>Alice: Response to boundary +``` + +```mermaid +sequenceDiagram + participant Alice@{ "type" : "boundary" } + participant Bob + Alice->>Bob: Request from boundary + Bob->>Alice: Response to boundary +``` + +### Control + +If you want to use the control symbol for a participant, use the JSON configuration syntax as shown below. + +```mermaid-example +sequenceDiagram + participant Alice@{ "type" : "control" } + participant Bob + Alice->>Bob: Control request + Bob->>Alice: Control response +``` + +```mermaid +sequenceDiagram + participant Alice@{ "type" : "control" } + participant Bob + Alice->>Bob: Control request + Bob->>Alice: Control response +``` + +### Entity + +If you want to use the entity symbol for a participant, use the JSON configuration syntax as shown below. + +```mermaid-example +sequenceDiagram + participant Alice@{ "type" : "entity" } + participant Bob + Alice->>Bob: Entity request + Bob->>Alice: Entity response +``` + +```mermaid +sequenceDiagram + participant Alice@{ "type" : "entity" } + participant Bob + Alice->>Bob: Entity request + Bob->>Alice: Entity response +``` + +### Database + +If you want to use the database symbol for a participant, use the JSON configuration syntax as shown below. + +```mermaid-example +sequenceDiagram + participant Alice@{ "type" : "database" } + participant Bob + Alice->>Bob: DB query + Bob->>Alice: DB result +``` + +```mermaid +sequenceDiagram + participant Alice@{ "type" : "database" } + participant Bob + Alice->>Bob: DB query + Bob->>Alice: DB result +``` + +### Collections + +If you want to use the collections symbol for a participant, use the JSON configuration syntax as shown below. + +```mermaid-example +sequenceDiagram + participant Alice@{ "type" : "collections" } + participant Bob + Alice->>Bob: Collections request + Bob->>Alice: Collections response +``` + +```mermaid +sequenceDiagram + participant Alice@{ "type" : "collections" } + participant Bob + Alice->>Bob: Collections request + Bob->>Alice: Collections response +``` + +### Queue + +If you want to use the queue symbol for a participant, use the JSON configuration syntax as shown below. + +```mermaid-example +sequenceDiagram + participant Alice@{ "type" : "queue" } + participant Bob + Alice->>Bob: Queue message + Bob->>Alice: Queue response +``` + +```mermaid +sequenceDiagram + participant Alice@{ "type" : "queue" } + participant Bob + Alice->>Bob: Queue message + Bob->>Alice: Queue response +``` + +### Aliases + +The actor can have a convenient identifier and a descriptive label. Aliases can be defined in two ways: using external syntax with the `as` keyword, or inline within the configuration object. + +#### External Alias Syntax + +You can define an alias using the `as` keyword after the participant declaration: + +```mermaid-example +sequenceDiagram + participant A as Alice + participant J as John + A->>J: Hello John, how are you? + J->>A: Great! +``` + +```mermaid +sequenceDiagram + participant A as Alice + participant J as John + A->>J: Hello John, how are you? + J->>A: Great! +``` + +The external alias syntax also works with participant stereotype configurations, allowing you to combine type specification with aliases: + +```mermaid-example +sequenceDiagram + participant API@{ "type": "boundary" } as Public API + actor DB@{ "type": "database" } as User Database + participant Svc@{ "type": "control" } as Auth Service + API->>Svc: Authenticate + Svc->>DB: Query user + DB-->>Svc: User data + Svc-->>API: Token +``` + +```mermaid +sequenceDiagram + participant API@{ "type": "boundary" } as Public API + actor DB@{ "type": "database" } as User Database + participant Svc@{ "type": "control" } as Auth Service + API->>Svc: Authenticate + Svc->>DB: Query user + DB-->>Svc: User data + Svc-->>API: Token +``` + +#### Inline Alias Syntax + +Alternatively, you can define an alias directly inside the configuration object using the `"alias"` field. This works with both `participant` and `actor` keywords: + +```mermaid-example +sequenceDiagram + participant API@{ "type": "boundary", "alias": "Public API" } + participant Auth@{ "type": "control", "alias": "Auth Service" } + participant DB@{ "type": "database", "alias": "User Database" } + API->>Auth: Login request + Auth->>DB: Query user + DB-->>Auth: User data + Auth-->>API: Access token +``` + +```mermaid +sequenceDiagram + participant API@{ "type": "boundary", "alias": "Public API" } + participant Auth@{ "type": "control", "alias": "Auth Service" } + participant DB@{ "type": "database", "alias": "User Database" } + API->>Auth: Login request + Auth->>DB: Query user + DB-->>Auth: User data + Auth-->>API: Access token +``` + +#### Alias Precedence + +When both inline alias (in the configuration object) and external alias (using `as` keyword) are provided, the **external alias takes precedence**: + +```mermaid-example +sequenceDiagram + participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name + participant DB@{ "type": "database", "alias": "Internal DB" } as External DB + API->>DB: Query + DB-->>API: Result +``` + +```mermaid +sequenceDiagram + participant API@{ "type": "boundary", "alias": "Internal Name" } as External Name + participant DB@{ "type": "database", "alias": "Internal DB" } as External DB + API->>DB: Query + DB-->>API: Result +``` + +In the example above, "External Name" and "External DB" will be displayed, not "Internal Name" and "Internal DB". + +### Actor Creation and Destruction (v10.3.0+) + +It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message. + +``` +create participant B +A --> B: Hello +``` + +Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created. + +```mermaid-example +sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bob + Bob->>Alice: I agree +``` + +```mermaid +sequenceDiagram + Alice->>Bob: Hello Bob, how are you ? + Bob->>Alice: Fine, thank you. And you? + create participant Carl + Alice->>Carl: Hi Carl! + create actor D as Donald + Carl->>D: Hi! + destroy Carl + Alice-xCarl: We are too many + destroy Bob + Bob->>Alice: I agree +``` + +#### Unfixable actor/participant creation/deletion error + +If an error of the following type occurs when creating or deleting an actor/participant: + +> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram. + +And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+). + +### Grouping / Box + +The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation: + +``` +box Aqua Group Description +... actors ... +end +box Group without description +... actors ... +end +box rgb(33,66,99) +... actors ... +end +box rgba(33,66,99,0.5) +... actors ... +end +``` + +> **Note** +> If your group name is a color you can force the color to be transparent: + +``` +box transparent Aqua +... actors ... +end +``` + +```mermaid-example + sequenceDiagram + box Purple Alice & John + participant A + participant J + end + box Another Group + participant B + participant C + end + A->>J: Hello John, how are you? + J->>A: Great! + A->>B: Hello Bob, how is Charley? + B->>C: Hello Charley, how are you? +``` + +```mermaid + sequenceDiagram + box Purple Alice & John + participant A + participant J + end + box Another Group + participant B + participant C + end + A->>J: Hello John, how are you? + J->>A: Great! + A->>B: Hello Bob, how is Charley? + B->>C: Hello Charley, how are you? +``` + +## Messages + +Messages can be of two displayed either solid or with a dotted line. + +``` +[Actor][Arrow][Actor]:Message text +``` + +Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows. + +#### Supported Arrow Types + +**Standard Arrow Types** + +| Type | Description | +| -------- | ---------------------------------------------------- | +| `->` | Solid line without arrow | +| `-->` | Dotted line without arrow | +| `->>` | Solid line with arrowhead | +| `-->>` | Dotted line with arrowhead | +| `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) | +| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) | +| `-x` | Solid line with a cross at the end | +| `--x` | Dotted line with a cross at the end | +| `-)` | Solid line with an open arrow at the end (async) | +| `--)` | Dotted line with a open arrow at the end (async) | + +**Half-Arrows (v\+)** + +The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`). + +--- + +| Type | Description | +| ------- | ---------------------------------------------------- | +| `-\|\` | Solid line with top half arrowhead | +| `--\|\` | Dotted line with top half arrowhead | +| `-\|/` | Solid line with bottom half arrowhead | +| `--\|/` | Dotted line with bottom half arrowhead | +| `/\|-` | Solid line with reverse top half arrowhead | +| `/\|--` | Dotted line with reverse top half arrowhead | +| `\\-` | Solid line with reverse bottom half arrowhead | +| `\\--` | Dotted line with reverse bottom half arrowhead | +| `-\\` | Solid line with top stick half arrowhead | +| `--\\` | Dotted line with top stick half arrowhead | +| `-//` | Solid line with bottom stick half arrowhead | +| `--//` | Dotted line with bottom stick half arrowhead | +| `//-` | Solid line with reverse top stick half arrowhead | +| `//--` | Dotted line with reverse top stick half arrowhead | +| `\\-` | Solid line with reverse bottom stick half arrowhead | +| `\\--` | Dotted line with reverse bottom stick half arrowhead | + +## Central Connections (v\+) + +Mermaid sequence diagrams support **central lifeline connections** using a `()`. +This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another. + +To indicate a central connection, append `()` to the arrow syntax. + +#### Basic Syntax + +```mermaid-example +sequenceDiagram + participant Alice + participant John + Alice->>()John: Hello John + Alice()->>John: How are you? + John()->>()Alice: Great! +``` + +```mermaid +sequenceDiagram + participant Alice + participant John + Alice->>()John: Hello John + Alice()->>John: How are you? + John()->>()Alice: Great! +``` + +## Activations + +It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations: + +```mermaid-example +sequenceDiagram + Alice->>John: Hello John, how are you? + activate John + John-->>Alice: Great! + deactivate John +``` + +```mermaid +sequenceDiagram + Alice->>John: Hello John, how are you? + activate John + John-->>Alice: Great! + deactivate John +``` + +There is also a shortcut notation by appending `+`/`-` suffix to the message arrow: + +```mermaid-example +sequenceDiagram + Alice->>+John: Hello John, how are you? + John-->>-Alice: Great! +``` + +```mermaid +sequenceDiagram + Alice->>+John: Hello John, how are you? + John-->>-Alice: Great! +``` + +Activations can be stacked for same actor: + +```mermaid-example +sequenceDiagram + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + John-->>-Alice: I feel great! +``` + +```mermaid +sequenceDiagram + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + John-->>-Alice: I feel great! +``` + +## Notes + +It is possible to add notes to a sequence diagram. This is done by the notation +Note \[ right of | left of | over ] \[Actor]: Text in note content + +See the example below: + +```mermaid-example +sequenceDiagram + participant John + Note right of John: Text in note +``` + +```mermaid +sequenceDiagram + participant John + Note right of John: Text in note +``` + +It is also possible to create notes spanning two participants: + +```mermaid-example +sequenceDiagram + Alice->John: Hello John, how are you? + Note over Alice,John: A typical interaction +``` + +```mermaid +sequenceDiagram + Alice->John: Hello John, how are you? + Note over Alice,John: A typical interaction +``` + +## Line breaks + +Line break can be added to Note and Message: + +```mermaid-example +sequenceDiagram + Alice->John: Hello John,
how are you? + Note over Alice,John: A typical interaction
But now in two lines +``` + +```mermaid +sequenceDiagram + Alice->John: Hello John,
how are you? + Note over Alice,John: A typical interaction
But now in two lines +``` + +Line breaks in Actor names requires aliases: + +```mermaid-example +sequenceDiagram + participant Alice as Alice
Johnson + Alice->John: Hello John,
how are you? + Note over Alice,John: A typical interaction
But now in two lines +``` + +```mermaid +sequenceDiagram + participant Alice as Alice
Johnson + Alice->John: Hello John,
how are you? + Note over Alice,John: A typical interaction
But now in two lines +``` + +## Loops + +It is possible to express loops in a sequence diagram. This is done by the notation + +``` +loop Loop text +... statements ... +end +``` + +See the example below: + +```mermaid-example +sequenceDiagram + Alice->John: Hello John, how are you? + loop Every minute + John-->Alice: Great! + end +``` + +```mermaid +sequenceDiagram + Alice->John: Hello John, how are you? + loop Every minute + John-->Alice: Great! + end +``` + +## Alt + +It is possible to express alternative paths in a sequence diagram. This is done by the notation + +``` +alt Describing text +... statements ... +else +... statements ... +end +``` + +or if there is sequence that is optional (if without else). + +``` +opt Describing text +... statements ... +end +``` + +See the example below: + +```mermaid-example +sequenceDiagram + 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 +``` + +```mermaid +sequenceDiagram + 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 +``` + +## Parallel + +It is possible to show actions that are happening in parallel. + +This is done by the notation + +``` +par [Action 1] +... statements ... +and [Action 2] +... statements ... +and [Action N] +... statements ... +end +``` + +See the example below: + +```mermaid-example +sequenceDiagram + par Alice to Bob + Alice->>Bob: Hello guys! + and Alice to John + Alice->>John: Hello guys! + end + Bob-->>Alice: Hi Alice! + John-->>Alice: Hi Alice! +``` + +```mermaid +sequenceDiagram + par Alice to Bob + Alice->>Bob: Hello guys! + and Alice to John + Alice->>John: Hello guys! + end + Bob-->>Alice: Hi Alice! + John-->>Alice: Hi Alice! +``` + +It is also possible to nest parallel blocks. + +```mermaid-example +sequenceDiagram + par Alice to Bob + Alice->>Bob: Go help John + and Alice to John + Alice->>John: I want this done today + par John to Charlie + John->>Charlie: Can we do this today? + and John to Diana + John->>Diana: Can you help us today? + end + end +``` + +```mermaid +sequenceDiagram + par Alice to Bob + Alice->>Bob: Go help John + and Alice to John + Alice->>John: I want this done today + par John to Charlie + John->>Charlie: Can we do this today? + and John to Diana + John->>Diana: Can you help us today? + end + end +``` + +## Critical Region + +It is possible to show actions that must happen automatically with conditional handling of circumstances. + +This is done by the notation + +``` +critical [Action that must be performed] +... statements ... +option [Circumstance A] +... statements ... +option [Circumstance B] +... statements ... +end +``` + +See the example below: + +```mermaid-example +sequenceDiagram + critical Establish a connection to the DB + Service-->DB: connect + option Network timeout + Service-->Service: Log error + option Credentials rejected + Service-->Service: Log different error + end +``` + +```mermaid +sequenceDiagram + critical Establish a connection to the DB + Service-->DB: connect + option Network timeout + Service-->Service: Log error + option Credentials rejected + Service-->Service: Log different error + end +``` + +It is also possible to have no options at all + +```mermaid-example +sequenceDiagram + critical Establish a connection to the DB + Service-->DB: connect + end +``` + +```mermaid +sequenceDiagram + critical Establish a connection to the DB + Service-->DB: connect + end +``` + +This critical block can also be nested, equivalently to the `par` statement as seen above. + +## 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 + +``` +break [something happened] +... statements ... +end +``` + +See the example below: + +```mermaid-example +sequenceDiagram + Consumer-->API: Book something + API-->BookingService: Start booking process + break when the booking process fails + API-->Consumer: show failure + end + API-->BillingService: Start billing process +``` + +```mermaid +sequenceDiagram + Consumer-->API: Book something + API-->BookingService: Start booking process + break when the booking process fails + API-->Consumer: show failure + end + API-->BillingService: Start billing process +``` + +## Background Highlighting + +It is possible to highlight flows by providing colored background rects. This is done by the notation + +``` +rect COLOR +... content ... +end +``` + +The colors are defined using rgb and rgba syntax. + +``` +rect rgb(0, 255, 0) +... content ... +end +``` + +``` +rect rgba(0, 0, 255, .1) +... content ... +end +``` + +See the examples below: + +```mermaid-example +sequenceDiagram + participant Alice + participant John + + rect rgb(191, 223, 255) + note right of Alice: Alice calls John. + Alice->>+John: Hello John, how are you? + rect rgb(200, 150, 255) + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + end + John-->>-Alice: I feel great! + end + Alice ->>+ John: Did you want to go to the game tonight? + John -->>- Alice: Yeah! See you there. + +``` + +```mermaid +sequenceDiagram + participant Alice + participant John + + rect rgb(191, 223, 255) + note right of Alice: Alice calls John. + Alice->>+John: Hello John, how are you? + rect rgb(200, 150, 255) + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + end + John-->>-Alice: I feel great! + end + Alice ->>+ John: Did you want to go to the game tonight? + John -->>- Alice: Yeah! See you there. + +``` + +## Comments + +Comments can be entered within a sequence diagram, 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 +sequenceDiagram + Alice->>John: Hello John, how are you? + %% this is a comment + John-->>Alice: Great! +``` + +```mermaid +sequenceDiagram + Alice->>John: Hello John, how are you? + %% this is a comment + John-->>Alice: Great! +``` + +## Entity codes to escape characters + +It is possible to escape characters using the syntax exemplified here. + +```mermaid-example +sequenceDiagram + A->>B: I #9829; you! + B->>A: I #9829; you #infin; times more! +``` + +```mermaid +sequenceDiagram + A->>B: I #9829; you! + B->>A: I #9829; you #infin; times more! +``` + +Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names. + +Because semicolons can be used instead of line breaks to define the markup, you need to use `#59;` to include a semicolon in message text. + +## sequenceNumbers + +It is possible to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below: + +```html + +``` + +It can also be turned on via the diagram code as in the diagram: + +```mermaid-example +sequenceDiagram + autonumber + Alice->>John: Hello John, how are you? + loop HealthCheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` + +```mermaid +sequenceDiagram + autonumber + Alice->>John: Hello John, how are you? + loop HealthCheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +``` + +## Actor Menus + +Actors can have popup-menus containing individualized links to external pages. For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service. + +This can be configured by adding one or more link lines with the format: + +``` +link : @ +``` + +```mermaid-example +sequenceDiagram + participant Alice + participant John + link Alice: Dashboard @ https://dashboard.contoso.com/alice + link Alice: Wiki @ https://wiki.contoso.com/alice + link John: Dashboard @ https://dashboard.contoso.com/john + link John: Wiki @ https://wiki.contoso.com/john + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +```mermaid +sequenceDiagram + participant Alice + participant John + link Alice: Dashboard @ https://dashboard.contoso.com/alice + link Alice: Wiki @ https://wiki.contoso.com/alice + link John: Dashboard @ https://dashboard.contoso.com/john + link John: Wiki @ https://wiki.contoso.com/john + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +#### Advanced Menu Syntax + +There is an advanced syntax that relies on JSON formatting. If you are comfortable with JSON format, then this exists as well. + +This can be configured by adding the links lines with the format: + +``` +links : +``` + +An example is below: + +```mermaid-example +sequenceDiagram + participant Alice + participant John + links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"} + links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"} + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +```mermaid +sequenceDiagram + participant Alice + participant John + links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"} + links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"} + Alice->>John: Hello John, how are you? + John-->>Alice: Great! + Alice-)John: See you later! +``` + +## Styling + +Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss + +### Classes used + +| Class | Description | +| -------------- | -------------------------------------------------------------- | +| actor | Styles for the actor box. | +| actor-top | Styles for the actor figure/ box at the top of the diagram. | +| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. | +| text.actor | Styles for text of all of the actors. | +| text.actor-box | Styles for text of the actor box. | +| text.actor-man | Styles for text of the actor figure. | +| actor-line | The vertical line for an actor. | +| messageLine0 | Styles for the solid message line. | +| messageLine1 | Styles for the dotted message line. | +| messageText | Defines styles for the text on the message arrows. | +| labelBox | Defines styles label to left in a loop. | +| labelText | Styles for the text in label for loops. | +| loopText | Styles for the text in the loop box. | +| loopLine | Defines styles for the lines in the loop box. | +| note | Styles for the note box. | +| noteText | Styles for the text on in the note boxes. | + +### Sample stylesheet + +```css +body { + background: white; +} + +.actor { + stroke: #ccccff; + fill: #ececff; +} +text.actor { + fill: black; + stroke: none; + font-family: Helvetica; +} + +.actor-line { + stroke: grey; +} + +.messageLine0 { + stroke-width: 1.5; + stroke-dasharray: '2 2'; + marker-end: 'url(#arrowhead)'; + stroke: black; +} + +.messageLine1 { + stroke-width: 1.5; + stroke-dasharray: '2 2'; + stroke: black; +} + +#arrowhead { + fill: black; +} + +.messageText { + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-size: 14px; +} + +.labelBox { + stroke: #ccccff; + fill: #ececff; +} + +.labelText { + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; +} + +.loopText { + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; +} + +.loopLine { + stroke-width: 2; + stroke-dasharray: '2 2'; + marker-end: 'url(#arrowhead)'; + stroke: #ccccff; +} + +.note { + stroke: #decc93; + fill: #fff5ad; +} + +.noteText { + fill: black; + stroke: none; + font-family: 'trebuchet ms', verdana, arial; + font-size: 14px; +} +``` + +## Configuration + +It is possible to adjust the margins for rendering the sequence diagram. + +This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration. +How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page. +`mermaid.sequenceConfig` can be set to a JSON string with config parameters or the corresponding object. + +```javascript +mermaid.sequenceConfig = { + diagramMarginX: 50, + diagramMarginY: 10, + boxTextMargin: 5, + noteMargin: 10, + messageMargin: 35, + mirrorActors: true, +}; +``` + +### Possible configuration parameters: + +| Parameter | Description | Default value | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | +| mirrorActors | 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 | +| actorFontSize | Sets the font size for the actor's description | 14 | +| actorFontFamily | Sets the font family for the actor's description | "Open Sans", sans-serif | +| actorFontWeight | Sets the font weight for the actor's description | "Open Sans", sans-serif | +| noteFontSize | Sets the font size for actor-attached notes | 14 | +| noteFontFamily | Sets the font family for actor-attached notes | "trebuchet ms", verdana, arial | +| noteFontWeight | Sets the font weight for actor-attached notes | "trebuchet ms", verdana, arial | +| noteAlign | Sets the text alignment for text in actor-attached notes | center | +| messageFontSize | Sets the font size for actor<->actor messages | 16 | +| messageFontFamily | Sets the font family for actor<->actor messages | "trebuchet ms", verdana, arial | +| messageFontWeight | Sets the font weight for actor<->actor messages | "trebuchet ms", verdana, arial | diff --git a/claude-skills-reference/mermaid/references/stateDiagram.md b/claude-skills-reference/mermaid/references/stateDiagram.md new file mode 100644 index 0000000..c9ca956 --- /dev/null +++ b/claude-skills-reference/mermaid/references/stateDiagram.md @@ -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 <\>. + +```mermaid-example +stateDiagram-v2 + state if_state <> + [*] --> IsPositive + IsPositive --> if_state + if_state --> False: if n < 0 + if_state --> True : if n >= 0 +``` + +```mermaid +stateDiagram-v2 + state if_state <> + [*] --> 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 <\> <\>. + +```mermaid-example + stateDiagram-v2 + state fork_state <> + [*] --> fork_state + fork_state --> State2 + fork_state --> State3 + + state join_state <> + State2 --> join_state + State3 --> join_state + join_state --> State4 + State4 --> [*] +``` + +```mermaid + stateDiagram-v2 + state fork_state <> + [*] --> fork_state + fork_state --> State2 + fork_state --> State3 + + state join_state <> + 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 --> [*] +``` + + diff --git a/claude-skills-reference/mermaid/references/timeline.md b/claude-skills-reference/mermaid/references/timeline.md new file mode 100644 index 0000000..cbebbcd --- /dev/null +++ b/claude-skills-reference/mermaid/references/timeline.md @@ -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
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
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 `
` 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.
The people who live here are hunter-gatherers. + section Bronze Age + 2300 BC : People arrive from Europe and settle in Britain.
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.
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.
The people who live here are hunter-gatherers. + section Bronze Age + 2300 BC : People arrive from Europe and settle in Britain.
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.
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
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
Release XYZ Tier + Bullet 3 : sub-point
3a : sub-point 3b + : sub-point 3c + Bullet 4 : sub-point 4a : sub-point 4b +``` + +```mermaid +timeline + title MermaidChart 2023 Timeline + section 2023 Q1
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
Release XYZ Tier + Bullet 3 : sub-point
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 + +``` + +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. diff --git a/claude-skills-reference/mermaid/references/treemap.md b/claude-skills-reference/mermaid/references/treemap.md new file mode 100644 index 0000000..1ee916f --- /dev/null +++ b/claude-skills-reference/mermaid/references/treemap.md @@ -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. diff --git a/claude-skills-reference/mermaid/references/userJourney.md b/claude-skills-reference/mermaid/references/userJourney.md new file mode 100644 index 0000000..5a2fb68 --- /dev/null +++ b/claude-skills-reference/mermaid/references/userJourney.md @@ -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 is a number between 1 and 5, inclusive. diff --git a/claude-skills-reference/mermaid/references/xyChart.md b/claude-skills-reference/mermaid/references/xyChart.md new file mode 100644 index 0000000..742a4f1 --- /dev/null +++ b/claude-skills-reference/mermaid/references/xyChart.md @@ -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] +``` diff --git a/claude-skills-reference/mermaid/references/zenuml.md b/claude-skills-reference/mermaid/references/zenuml.md new file mode 100644 index 0000000..6df13fd --- /dev/null +++ b/claude-skills-reference/mermaid/references/zenuml.md @@ -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: +![img.png](img/zenuml-participant-annotators.png) + +### 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 + +```