Agent-Skills.md

Agent Skills: [H1][MERMAID-DIAGRAMMING]

>-

UncategorizedID: bsamiee/parametric_forge/mermaid-diagramming

Repository

bsamiee/parametric_forge
bsamiee
2

Install this agent skill to your local

pnpm dlx add-skill https://github.com/bsamiee/Parametric_Forge/tree/HEAD/.claude/skills/mermaid-diagramming

Skill Files

Browse the full folder contents for mermaid-diagramming.

Download Skill

Loading file tree…

.claude/skills/mermaid-diagramming/SKILL.md

Skill Metadata

Name
mermaid-diagramming
Description
>-

[H1][MERMAID-DIAGRAMMING]

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.

[01]-[INSTRUCTIONS]

Required Tasks:

  1. Read →global-config.md: Frontmatter YAML, ELK layout (required for ALL diagrams).
  2. Read →styling.md: Theme, classDef, palette.
  3. Select diagram category per §2 table, load corresponding syntax reference.

References:

| Domain | File | | ------------- | ------------------------------------------------------------------------ | | Configuration | global-config.md | | Styling | styling.md | | Validation | validation.md | | Graph | graph.md | | Interaction | interaction.md | | Modeling | modeling.md | | Charts | charts.md | | Architecture | architecture.md | | Template | architecture-beta.template.md | | Template | c4-container.template.md |

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.
  • Look Options — Three visual modes: neo (default modern), classic (traditional), handDrawn (sketch aesthetic). Set via look: in frontmatter.

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.

[02]-[DIAGRAM_SELECTION]

| [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] | | :-----: | ------------ | -------------------- | :---: | ------------ | | [01] | Flowchart | flowchart LR | LR | Graph | | [02] | Mindmap | mindmap | — | Graph | | [03] | Block | block-beta | — | Graph | | [04] | Sequence | sequenceDiagram | TB | Interaction | | [05] | Journey | journey | — | Interaction | | [06] | State | stateDiagram-v2 | TB | Modeling | | [07] | ER | erDiagram | LR | Modeling | | [08] | Class | classDiagram | TB | Modeling | | [09] | 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.

[03]-[VALIDATION]

[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.