mirror of
https://github.com/jgraph/drawio-mcp.git
synced 2026-09-14 15:42:06 +08:00
docs(mermaid): add Wardley map + Event Modeling, bump type count to 28
Adds the two diagram types (wardley-beta, eventmodeling) shipped in the native parser since the reference was written, with syntax taken from the drawio-mermaid parsers/test examples. Bumps the supported-type count 26 -> 28 and points to discussion #5643 as the canonical list. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -66,7 +66,7 @@ const xmlReference = readFileSync(
|
||||
|
||||
// Same dual-path lookup for the Mermaid reference. Appended to the
|
||||
// open_drawio_mermaid tool description so LLMs get concrete syntax hints
|
||||
// for every supported diagram type (26) plus flowchart styling.
|
||||
// for every supported diagram type (28) plus flowchart styling.
|
||||
const sharedMermaidPath = join(__dirname, "..", "..", "shared", "mermaid-reference.md");
|
||||
const localMermaidPath = join(__dirname, "mermaid-reference.md");
|
||||
const mermaidReference = readFileSync(
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
# Mermaid Reference
|
||||
|
||||
Short hints for generating Mermaid diagrams that render correctly in draw.io. draw.io's Mermaid parser covers 26 diagram types — the header keyword on the first non-directive line selects the type.
|
||||
Short hints for generating Mermaid diagrams that render correctly in draw.io. draw.io's Mermaid parser covers 28 diagram types — the header keyword on the first non-directive line selects the type.
|
||||
|
||||
_Canonical list & dialog/ELK docs: <https://github.com/jgraph/drawio/discussions/5643>._
|
||||
|
||||
## General rules
|
||||
|
||||
- **Pick the type keyword carefully.** `graph`/`flowchart`, `classDiagram`, `stateDiagram-v2`, `erDiagram`, `sequenceDiagram`, `gitGraph`, `journey`, `pie`, `gantt`, `mindmap`, `timeline`, `quadrantChart`, `requirementDiagram`, `sankey-beta`, `xychart-beta`, `block-beta`, `c4Context`/`C4Container`/`C4Component`, `architecture-beta`, `radar-beta`, `packet-beta`, `venn-beta`, `treemap-beta`, `treeView-beta`, `ishikawa-beta`, `kanban`, `zenuml`. Misspelling the header yields a blank diagram.
|
||||
- **Pick the type keyword carefully.** `graph`/`flowchart`, `classDiagram`, `stateDiagram-v2`, `erDiagram`, `sequenceDiagram`, `gitGraph`, `journey`, `pie`, `gantt`, `mindmap`, `timeline`, `quadrantChart`, `requirementDiagram`, `sankey-beta`, `xychart-beta`, `block-beta`, `c4Context`/`C4Container`/`C4Component`, `architecture-beta`, `radar-beta`, `packet-beta`, `venn-beta`, `treemap-beta`, `treeView-beta`, `ishikawa-beta`, `kanban`, `zenuml`, `wardley-beta`, `eventmodeling`. Misspelling the header yields a blank diagram.
|
||||
- **No trailing punctuation on node IDs.** IDs are identifiers (`myNode`, `node_1`, `A`) — spaces, hyphens (in some contexts), and reserved words (`end`, `class`, `subgraph`) break the parse. Put display text in brackets or quotes instead: `A["User's Account"]`.
|
||||
- **One statement per line.** Separate statements with newlines; `;` works as a delimiter in flowchart but not everywhere.
|
||||
- **Quote labels with special characters** (`:`, `-`, parentheses, non-ASCII). Use `"` not `'`.
|
||||
@@ -427,6 +429,40 @@ zenuml
|
||||
|
||||
Participant roles: `@Actor`, `@Boundary`, `@Control`, `@Entity`, `@Database`. Messages use `->` with a colon-separated label. Supports `if/else`, `while`, `par` blocks like sequence diagrams.
|
||||
|
||||
## Wardley map
|
||||
|
||||
```
|
||||
wardley-beta
|
||||
title Tea Shop
|
||||
anchor Business [0.95, 0.63]
|
||||
component Cup of Tea [0.79, 0.61]
|
||||
component Kettle [0.43, 0.35] (inertia)
|
||||
Business -> Cup of Tea
|
||||
Cup of Tea -> Kettle
|
||||
evolve Kettle 0.62
|
||||
```
|
||||
|
||||
- Header `wardley` or `wardley-beta`; `title` optional.
|
||||
- `anchor`/`component Name [visibility, evolution]` — coords are `[0..1, 0..1]` (y = value-chain visibility, x = evolution from Genesis to Commodity).
|
||||
- Component evolution markers in parens: `(inertia)`, `(build)`, `(buy)`, `(outsource)`, `(market)`.
|
||||
- Links: `A -> B` dependency, `A +> B` flow. `evolve Name <x>` adds an evolution target; `evolution Genesis -> Custom -> Product -> Commodity` relabels the x-axis stages.
|
||||
- Extras: `note "text" [x,y]`, `annotation N,[x,y] "text"`, `accelerator`/`deaccelerator "text" [x,y]`.
|
||||
|
||||
## Event Modeling
|
||||
|
||||
```
|
||||
eventmodeling
|
||||
tf 01 ui CartUI
|
||||
tf 02 cmd AddItem
|
||||
tf 03 evt ItemAdded
|
||||
tf 04 rmo Cart
|
||||
```
|
||||
|
||||
- Each `tf <id> <type> <Name>` is a time-frame (column). Types: `ui` / `pcr` (processor), `cmd` / `command`, `rmo` / `readmodel`, `evt` / `event` — placed on the UI/Automation, Command/Read-Model, and Events swimlanes.
|
||||
- Wire frames with `->>`: `tf 04 evt ItemChanged ->> 02 ->> 03` links frame 04 back to 02 and 03.
|
||||
- `Namespace.Name` groups frames into slices (e.g. `Order.ChangeOrder`).
|
||||
- `data <id> { ... }` blocks attach payloads, referenced inline with `[[id]]`: `tf 02 cmd AddItem [[AddItem01]]`.
|
||||
|
||||
## When to prefer XML over Mermaid
|
||||
|
||||
- Precise positions / custom coordinates.
|
||||
|
||||
Reference in New Issue
Block a user