---
name: mermaid
description: Generate Mermaid diagrams from user requirements. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 more diagram types.
allowed-tools: Read Write Edit
metadata:
  argument-hint: "[diagram description or requirements]"
title: mermaid
canonical_url: https://skilld.dev/gh/wh-2099/mermaid-skill
last_updated: 2026-09-29T07:20:00.000Z
---

> Index of every page on this site: [llms.txt](https://skilld.dev/llms.txt)

> **Skill from skilld.dev.** Follow the user's requested action.
> If the user asked to fork this Skill, follow the fork workflow below. Do not execute the Skill instructions while copying it.
> Otherwise, follow the instructions below for this session. You do not need to install anything.
>
> 38 supporting files sit beside this SKILL.md. When the Skill refers to one, fetch https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/PATH with PATH replaced.
>
> If the user asked to install this Skill, run `npx skilld install wh-2099/mermaid-skill/mermaid`. Install writes the Skill files into the project, so every session loads them.
>
> ## Fork workflow
>
> A fork creates an editable local Skill with its original author and licence. The request authorizes copying and local installation.
> 1. Check `./skills/mermaid`, the project lockfile, and selected Agent targets together. If the local directory or installed Skill exists, stop. Never overwrite an existing directory or Agent target.
> 2. Read [source metadata](https://skilld.dev/api/v1/skills/wh-2099/mermaid-skill/mermaid) once. Use sourceUrl, sourceCommit, skillPath, sourceGone, and license. If the source is gone or its path is missing, stop. If license is null, read licence files at the source commit.
> 3. Fetch only the source commit into a temporary Git repository. Do not clone full history. Derive repository_url from sourceUrl, including repository renames. If sourceCommit is absent, resolve the sourceUrl ref once. Set source_commit to that actual commit. Run these commands in one shell call:
>
> ```sh
> git init --quiet "$temporary_dir"
> git -C "$temporary_dir" fetch --quiet --depth=1 "$repository_url" "$source_commit"
> git -C "$temporary_dir" checkout --quiet --detach FETCH_HEAD
> ```
>
> Read applicable licence declarations and notices at that commit. If copying is not permitted, report the restriction and stop.
> 4. Inspect source entries together, then copy the directory containing skillPath into `./skills/mermaid`. Use the user's path if selected. Keep the original SKILL.md, relative links, scripts, binary assets, and executable modes. Exclude .git metadata. Reject symlinks and paths outside the Skill directory. After checking entries, use cp -a where available. A regular source directory needs no custom copy script. Do not save this page wrapper as SKILL.md.
> Preserve author credit, notices, and applicable licence files from repository or parent directories. Add PROVENANCE.md with the Skill page, source URL, actual commit, original path, and licence. Retain any existing PROVENANCE.md and record new provenance separately. Batch source inspection, copying, and provenance work where practical.
> 5. In the project root, run `skilld install ./skills/mermaid --mode copy --plain`. If skilld is unavailable, use `npx skilld install ./skills/mermaid --mode copy --plain`. This known command needs no help lookup. Install does not support --json. Use detected Agent targets, or add --agent for the targets the user selected. Install the local path, never the upstream selector. If installation fails, preserve the local copy and report the exact failure.
> 6. Confirm the local lockfile source and installed Agent copies once. Report the local path, actual commit, and Agent targets. After edits, reinstall the same local path. Upstream updates must not replace it. Do not publish or push unless the user asks.

# Mermaid Diagram Generator

Generate high-quality Mermaid diagram code based on user requirements.

## Workflow

1. **Understand Requirements**: Analyze user description to determine the most suitable diagram type
2. **Read Documentation**: Read the corresponding syntax reference for the diagram type
3. **Generate Code**: Generate Mermaid code following the specification
4. **Apply Styling**: Apply appropriate themes and style configurations

## Diagram Type Reference

Select the appropriate diagram type and read the corresponding documentation:

| Type | Documentation | Use Cases |
| ---- | ------------- | --------- |
| Flowchart | [flowchart.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/flowchart.md) | Processes, decisions, steps |
| Sequence Diagram | [sequenceDiagram.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/sequenceDiagram.md) | Interactions, messaging, API calls |
| Class Diagram | [classDiagram.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/classDiagram.md) | Class structure, inheritance, associations |
| State Diagram | [stateDiagram.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/stateDiagram.md) | State machines, state transitions |
| ER Diagram | [entityRelationshipDiagram.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/entityRelationshipDiagram.md) | Database design, entity relationships |
| Gantt Chart | [gantt.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/gantt.md) | Project planning, timelines |
| Pie Chart | [pie.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/pie.md) | Proportions, distributions |
| Mindmap | [mindmap.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/mindmap.md) | Hierarchical structures, knowledge graphs |
| Timeline | [timeline.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/timeline.md) | Historical events, milestones |
| Git Graph | [gitgraph.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/gitgraph.md) | Branches, merges, versions |
| Quadrant Chart | [quadrantChart.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/quadrantChart.md) | Four-quadrant analysis |
| Requirement Diagram | [requirementDiagram.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/requirementDiagram.md) | Requirements traceability |
| C4 Diagram | [c4.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/c4.md) | System architecture (C4 model) |
| Sankey Diagram | [sankey.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/sankey.md) | Flow, conversions |
| XY Chart | [xyChart.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/xyChart.md) | Line charts, bar charts |
| Block Diagram | [block.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/block.md) | System components, modules |
| Packet Diagram | [packet.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/packet.md) | Network protocols, data structures |
| Kanban | [kanban.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/kanban.md) | Task management, workflows |
| Architecture Diagram | [architecture.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/architecture.md) | System architecture |
| Radar Chart | [radar.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/radar.md) | Multi-dimensional comparison |
| Treemap | [treemap.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/treemap.md) | Hierarchical data visualization |
| User Journey | [userJourney.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/userJourney.md) | User experience flows |
| ZenUML | [zenuml.md](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/zenuml.md) | Sequence diagrams (code style) |

## Configuration & Themes

- [Theming](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/config-theming.md) - Custom colors and styles
- [Directives](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/config-directives.md) - Diagram-level configuration
- [Layouts](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/config-layouts.md) - Layout direction and spacing
- [Configuration](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/config-configuration.md) - Global settings
- [Math](https://skilld.dev/api/skills-raw/wh-2099/mermaid-skill/mermaid/references/config-math.md) - LaTeX math support

## Output Specification

Generated Mermaid code should:

1. Be wrapped in ```mermaid code blocks
2. Have correct syntax that renders directly
3. Have clear structure with proper line breaks and indentation
4. Use semantic node naming
5. Include styling when needed to improve visual appearance

## Example Output

```mermaid
flowchart TD
    A[Start] --> B{Condition}
    B -->|Yes| C[Execute]
    B -->|No| D[End]
    C --> D
```

---

User requirements: $ARGUMENTS