From arckit
Provides Mermaid syntax reference for 23 diagram types including flowcharts, sequences, ER, Gantt, C4, mindmaps, timelines, plus node shapes, styling, theming, configs, and rendering errors.
npx claudepluginhub tractorjuice/arc-kit --plugin arckitThis skill uses the workspace's default tool permissions.
A comprehensive reference for all 23 Mermaid diagram types plus configuration and theming. This skill provides official Mermaid syntax documentation sourced from the [mermaid-skill](https://github.com/WH-2099/mermaid-skill) project (auto-synced from upstream Mermaid docs).
references/architecture.mdreferences/block.mdreferences/c4-layout-science.mdreferences/c4.mdreferences/classDiagram.mdreferences/config-configuration.mdreferences/config-directives.mdreferences/config-layouts.mdreferences/config-math.mdreferences/config-theming.mdreferences/config-tidy-tree.mdreferences/entityRelationshipDiagram.mdreferences/examples.mdreferences/flowchart.mdreferences/gantt.mdreferences/gitgraph.mdreferences/kanban.mdreferences/mindmap.mdreferences/packet.mdreferences/pie.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Performs token-optimized structural code search using tree-sitter AST parsing to discover symbols, outline files, and unfold code without reading full files.
A comprehensive reference for all 23 Mermaid diagram types plus configuration and theming. This skill provides official Mermaid syntax documentation sourced from the mermaid-skill project (auto-synced from upstream Mermaid docs).
To look up syntax for a specific diagram type, identify the type from the table below and read the corresponding reference file.
Select the appropriate diagram type and read the corresponding reference file:
| Type | Reference | ArcKit Commands Using It |
|---|---|---|
| Flowchart | flowchart.md | /arckit.diagram, /arckit.dfd, /arckit.roadmap, /arckit.plan, /arckit.backlog, /arckit.strategy, /arckit.story, /arckit.jsp-936 |
| Sequence Diagram | sequenceDiagram.md | /arckit.diagram |
| Class Diagram | classDiagram.md | — |
| State Diagram | stateDiagram.md | — |
| ER Diagram | entityRelationshipDiagram.md | /arckit.data-model |
| Gantt Chart | gantt.md | /arckit.roadmap, /arckit.plan, /arckit.strategy, /arckit.story, /arckit.presentation |
| Pie Chart | pie.md | /arckit.story, /arckit.presentation |
| Mindmap | mindmap.md | /arckit.story |
| Timeline | timeline.md | /arckit.story |
| Git Graph | gitgraph.md | — |
| Quadrant Chart | quadrantChart.md | /arckit.presentation |
| Requirement Diagram | requirementDiagram.md | — |
| C4 Diagram | c4.md | /arckit.diagram, /arckit.presentation |
| Sankey Diagram | sankey.md | — |
| XY Chart | xyChart.md | — |
| Block Diagram | block.md | — |
| Packet Diagram | packet.md | — |
| Kanban | kanban.md | — |
| Architecture Diagram | architecture.md | — |
| Radar Chart | radar.md | — |
| Treemap | treemap.md | — |
| User Journey | userJourney.md | — |
| ZenUML | zenuml.md | — |
| Topic | Reference |
|---|---|
| Theming | config-theming.md |
| Directives | config-directives.md |
| Layouts | config-layouts.md |
| Configuration | config-configuration.md |
| Math | config-math.md |
| Tidy Tree | config-tidy-tree.md |
| Examples | examples.md |
For research-backed C4 diagram layout guidance (declaration ordering, edge crossing targets, colour standards, PlantUML directional hints), see c4-layout-science.md. This ArcKit-specific reference supplements the upstream C4 syntax reference with graph drawing science and layout optimisation techniques.
These are the most common Mermaid syntax errors encountered when generating diagrams:
| Gotcha | Problem | Fix |
|---|---|---|
<br/> in flowchart edge labels | Mermaid flowchart parser rejects HTML in edge labels | Use comma-separated text: -->|"Uses, HTTPS"| |
end as node ID | end is a reserved keyword in Mermaid | Use a different ID: EndNode["End"] |
| Gantt date formats | Gantt requires specific date format | Use YYYY-MM-DD (e.g., 2025-01-15) |
| Gantt task status | Invalid task status keywords | Valid: done, active, crit, milestone |
| Parentheses in labels | Unescaped () breaks node parsing | Wrap in quotes: Node["Label (with parens)"] |
| Special chars in IDs | Hyphens, dots, spaces in node IDs | Use camelCase or underscores: apiGateway, api_gateway |
| Missing semicolons in ER | ER diagram attributes need specific syntax | Follow entity { type name } pattern |
| Subgraph naming | Subgraph IDs with spaces need quotes | subgraph "My Group" |
This skill handles conversational Mermaid syntax questions — quick lookups, syntax examples, troubleshooting rendering issues, and learning about diagram types.
For formal architecture diagram generation with document control, project integration, C4 layout science, and governance compliance, use the /arckit:diagram command instead. It generates versioned diagram artifacts saved to your project directory with full traceability to requirements and architecture principles.