[H1][MERMAID-DIAGRAMMING]

Dictum: Modern Mermaid syntax produces consistent, styled diagrams.

Mermaid v11+ diagram creation with frontmatter YAML, ELK layout, Dracula palette. 22 diagram types across 5 semantic categories.

Scope:

• Create: New diagrams from requirements. Select category, load syntax reference, apply styling.

• Reference: Syntax lookup for nodes, edges, relationships, charts, architecture.

Domain Navigation:

• [CONFIG] — Frontmatter YAML, ELK 5-phase layout, direction, limits. Load FIRST for all diagrams.

• [STYLING] — Theme presets, themeVariables, classDef, linkStyle, palette. Load for visual customization.

• [GRAPH] — Flowchart, mindmap, block. Load for: decision trees, hierarchies, system decomposition.

• [INTERACTION] — Sequence, journey. Load for: protocols, request-response, user experience.

• [MODELING] — State, ER, class, requirement. Load for: FSM, data models, OOP structure, traceability.

• [CHARTS] — Pie, quadrant, sankey, xy, radar, gantt, treemap. Load for: data visualization, project timelines.

• [ARCHITECTURE] — C4, architecture-beta, packet-beta, timeline, gitgraph, kanban. Load for: system views, infrastructure, network protocols, version control flow, project boards.

[1][INSTRUCTIONS]

Dictum: Progressive loading optimizes context.

Required Tasks:

• Read →global-config.md: Frontmatter YAML, ELK layout (required for ALL diagrams).

• Read →styling.md: Theme, classDef, palette.

• Select diagram category per §2 table, load corresponding syntax reference.

[REFERENCE]: →index.md — Complete file listing.

Guidance:

• Config First — Frontmatter YAML must precede diagram declaration. Mermaid parses config before nodes.

• ELK Layout — ELK provides comprehensive graph layout via five algorithmic phases: cycle breaking, layering, crossing minimization, node placement, edge routing.

Best-Practices:

• Load Sequence — global-config.md → styling.md → {category}.md → compose. Never skip configuration.

• Frontmatter Only — %%{init:...}%% directives deprecated v10.5.0. Use YAML frontmatter exclusively.

[2][DIAGRAM_SELECTION]

Dictum: Category determines semantic structure.

[CATEGORY] [TYPES] [REFERENCE]

Graph flowchart, mindmap, block →graph.md

Interaction sequence, journey →interaction.md

Modeling state, ER, class, requirement →modeling.md

Charts pie, quadrant, sankey, xy, radar, gantt, treemap →charts.md

Architecture C4, architecture, packet, timeline, gitgraph, kanban →architecture.md

Type Headers:

[INDEX] [TYPE] [HEADER] [DIR] [CATEGORY]

[1] Flowchart flowchart LR

LR Graph

[2] Mindmap mindmap

— Graph

[3] Block block-beta

— Graph

[4] Sequence sequenceDiagram

TB Interaction

[5] Journey journey

— Interaction

[6] State stateDiagram-v2

TB Modeling

[7] ER erDiagram

LR Modeling

[8] Class classDiagram

TB Modeling

[9] Requirement requirementDiagram

— Modeling

[10] Pie pie

— Charts

[11] Quadrant quadrantChart

— Charts

[12] Sankey sankey-beta

— Charts

[13] XY xychart-beta

— Charts

[14] Radar radar-beta

— Charts

[15] Gantt gantt

— Charts

[16] Treemap treemap-beta

— Charts

[17] C4 C4Context

— Architecture

[18] Architecture architecture-beta

— Architecture

[19] Packet packet-beta

— Architecture

[20] Timeline timeline

— Architecture

[21] GitGraph gitGraph

— Architecture

[22] Kanban kanban

— Architecture

Guidance:

• LR Default — Horizontal flow matches reading order. Sequence/State force TB implicitly.

• Beta Status — block, sankey, xy, radar, treemap, architecture, packet, kanban are beta; syntax may change.

Best-Practices:

• Category Match — Select by primary concern: flow→Graph, time→Interaction, structure→Modeling, data→Charts, system→Architecture.

[3][VALIDATION]

Dictum: Gates prevent rendering failures.

[VERIFY] Before diagram creation:

• Frontmatter: valid YAML with config: key (before diagram declaration).

• Direction: LR for flowchart/ER, implicit TB for sequence/state.

• Reserved words avoided: end , default , subgraph , class in node IDs.

• classDef: placed at diagram end, after node definitions.

• Accessibility: accTitle/accDescr present after diagram type.

[REFERENCE]: →validation.md — Full validation checklists and anti-patterns.