This skill should be used when the user asks about Mermaid diagram syntax, how to write a specific Mermaid diagram type (flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, git graph, quadrant, C4, sankey, XY chart, block, packet, kanban, architecture, radar, treemap, user journey, ZenUML), Mermaid node shapes, edge labels, styling, configuration, theming, layout options, or troubleshooting Mermaid rendering errors and syntax gotchas.
npx claudepluginhub tractorjuice/arc-kitThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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.mdA 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.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.