Agent skill · greedychipmunk

mermaid

Generate and validate Mermaid.js diagrams from text descriptions. Use when creating flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, ER diagrams, git graphs, user journeys, quadrant charts, XY charts, pie charts, architecture diagrams, block diagrams, requirement diagrams, treemaps, mindmaps, timelines, or Sankey diagrams. Also use when converting structured descriptions into visual diagrams or validating existing Mermaid syntax.

What it needs

About 9k tokens when loaded.

What this skill does

Mermaid.js Generate Mermaid.js diagrams from text descriptions and validate existing Mermaid syntax. When to Use Creating any of the 18 Mermaid diagram types from structured descriptions Converting plain-language descriptions into visual diagrams Validating existing Mermaid syntax for common errors Choosing the right diagram type for a given scenario Styling or theming Mermaid diagrams Diagram Types at a Glance Diagram Keyword Use For --- --- --- Flowchart flowchart / graph Process flows, decision trees, system logic Sequence sequenceDiagram Message passing between actors over time Gantt gantt Project schedules, task timelines Class classDiagram OOP class structure, inheritance, relationships State stateDiagram-v2 State machines, transitions, lifecycle ER erDiagram Database schemas, entity relationships Git Graph gitGraph Git branching and merge strategies User Journey journey User experience across task steps Quadrant quadrantChart 2D prioritization (e.g. impact vs. effort) XY Chart xychart-beta Bar charts, line charts with axes Pie pie Proportional data, percentage breakdowns Architecture architecture-beta Cloud/CI-CD service topology Block block-beta Fixed-position block layouts Requirement requirementDiagram SysML requirement traceability Treemap treemap-beta Hierarchical proportional data Mindmap mindmap Brainstorming, concept hierarchy Timeline timeline Chronological events Sankey sankey-beta Flow quantities between nodes Universal Syntax Every diagram begins with a diagram type keyword. Optional frontmatter and directives can configure the diagram before content. Frontmatter YAML between --- lines at the very start. Used for layout, look, and theme configuration. Directives Inline configuration via %%{ }%%. Can appear above or below the diagram definition. Comments %% starts a comment — everything after it on that line is ignored. Diagram-Breaking Words The word end inside flowchart and sequence diagrams breaks parsing. …

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills greedychipmunk/mermaid

View the source on GitHub

Browse the @skills marketplace