How do I install the Mermaid Diagrams skill?

Run npx skillmds@latest add dvcrn/mermaid-diagrams-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mermaid Diagrams safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mermaid Diagrams?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mermaid Diagrams free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mermaid Diagrams?

dvcrn (@dvcrn) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mermaid Diagrams by dvcrn — Agent Skill

Name: Mermaid Diagrams
Rating: 4.2 (5 reviews)
Author: dvcrn

Mermaid Diagrams

Generate architecture diagrams (network, system, cloud, microservices) and sequence diagrams (API flows, auth flows, data flows) as PNG files using Mermaid. Use when asked to create, draw, or diagram anything including system architecture, network topology, cloud infrastructure, API request flows, authentication flows, CI/CD pipelines, database flows, or any other technical diagram. Triggers on phrases like "create a diagram", "draw", "diagram this", "architecture diagram", "sequence diagram", "flow diagram", "network diagram", "system design diagram".

dvcrn Updated Sep 9, 2026 32 repo stars

File contents

Mermaid Diagrams Skill

Generates Mermaid diagrams and renders them to PNG using the mmdc CLI.

Reference Files

Architecture patterns (flowchart, C4, cloud, network, microservices) → references/architecture-patterns.md
Sequence diagram patterns (API flows, auth, CI/CD, DLP flows) → references/sequence-patterns.md

Load the relevant reference file based on diagram type requested.

Rendering Tool

Use mermaid.ink (free online renderer, no browser/install needed):

mkdir -p /home/bcaddy/.openclaw/workspace/diagrams
ENCODED=$(cat <input.mmd> | base64 -w 0)
curl -s "https://mermaid.ink/img/${ENCODED}?bgColor=white&width=2048" \
  -o /home/bcaddy/.openclaw/workspace/diagrams/<name>.png

Output directory: /home/bcaddy/.openclaw/workspace/diagrams/
Width: 2048px default; increase for very wide diagrams (&width=3000)
Always create output directory first: mkdir -p /home/bcaddy/.openclaw/workspace/diagrams

Workflow

1. Identify Diagram Type

Network/system/cloud/microservices → use flowchart or C4Context
API/auth/data flows, step-by-step processes → use sequenceDiagram
When in doubt: sequence for "how does X work step by step", architecture for "what does X look like"

2. Load Reference File

Architecture → references/architecture-patterns.md
Sequence → references/sequence-patterns.md

3. Generate Mermaid Code

Write complete, valid Mermaid syntax
Use descriptive node labels (not just A, B, C)
Use subgraphs to group related components in architecture diagrams
Use alt/loop/note blocks to add clarity in sequence diagrams
Match the style of the patterns in the reference file

4. Save .mmd File

Save to: /home/bcaddy/.openclaw/workspace/diagrams/<descriptive-name>.mmd

Use kebab-case, descriptive filenames: auth-flow.mmd, aws-architecture.mmd, api-gateway-sequence.mmd

5. Render to PNG via mermaid.ink

ENCODED=$(cat /home/bcaddy/.openclaw/workspace/diagrams/<name>.mmd | base64 -w 0)
curl -s "https://mermaid.ink/img/${ENCODED}?bgColor=white&width=2048" \
  -o /home/bcaddy/.openclaw/workspace/diagrams/<name>.png

6. Confirm Output

Report the full path to the saved PNG. Offer to adjust layout, add components, or generate a .mmd file for further editing in mermaid.live or VS Code.

Tips

flowchart LR for left-to-right pipelines and network flows
flowchart TD for top-down hierarchies and cloud stacks
Wide diagrams: increase -w (width); tall diagrams: increase -H (height)
For very complex diagrams, break into multiple diagrams
Always include a title comment at the top of the .mmd file: %% Title: ...

---name: mermaid-diagrams-2description: Generate architecture diagrams (network, system, cloud, microservices) and sequence diagrams (API flows, auth flows, data flows) as PNG files using Mermaid. Use when asked to create, draw, or diagram anything including system architecture, network topology, cloud infrastructure, API request flows, authentication flows, CI/CD pipelines, database flows, or any other technical diagram. Triggers on phrases like "create a diagram", "draw", "diagram this", "architecture diagram", "sequence diagram", "flow diagram", "network diagram", "system design diagram".--- # Mermaid Diagrams Skill Generates Mermaid diagrams and renders them to PNG using the `mmdc` CLI. ## Reference Files - **Architecture patterns** (flowchart, C4, cloud, network, microservices) → `references/architecture-patterns.md` - **Sequence diagram patterns** (API flows, auth, CI/CD, DLP flows) → `references/sequence-patterns.md` Load the relevant reference file based on diagram type requested. ## Rendering Tool Use **mermaid.ink** (free online renderer, no browser/install needed): ```bash mkdir -p /home/bcaddy/.openclaw/workspace/diagrams ENCODED=$(cat <input.mmd> | base64 -w 0) curl -s "https://mermaid.ink/img/${ENCODED}?bgColor=white&width=2048" \ -o /home/bcaddy/.openclaw/workspace/diagrams/<name>.png ``` - Output directory: `/home/bcaddy/.openclaw/workspace/diagrams/` - Width: 2048px default; increase for very wide diagrams (`&width=3000`) - Always create output directory first: `mkdir -p /home/bcaddy/.openclaw/workspace/diagrams` ## Workflow ### 1. Identify Diagram Type - Network/system/cloud/microservices → use `flowchart` or `C4Context` - API/auth/data flows, step-by-step processes → use `sequenceDiagram` - When in doubt: sequence for "how does X work step by step", architecture for "what does X look like" ### 2. Load Reference File - Architecture → `references/architecture-patterns.md` - Sequence → `references/sequence-patterns.md` ### 3. Generate Mermaid Code - Write complete, valid Mermaid syntax - Use descriptive node labels (not just A, B, C) - Use subgraphs to group related components in architecture diagrams - Use alt/loop/note blocks to add clarity in sequence diagrams - Match the style of the patterns in the reference file ### 4. Save .mmd File Save to: `/home/bcaddy/.openclaw/workspace/diagrams/<descriptive-name>.mmd` Use kebab-case, descriptive filenames: `auth-flow.mmd`, `aws-architecture.mmd`, `api-gateway-sequence.mmd` ### 5. Render to PNG via mermaid.ink ```bash ENCODED=$(cat /home/bcaddy/.openclaw/workspace/diagrams/<name>.mmd | base64 -w 0) curl -s "https://mermaid.ink/img/${ENCODED}?bgColor=white&width=2048" \ -o /home/bcaddy/.openclaw/workspace/diagrams/<name>.png ``` ### 6. Confirm Output Report the full path to the saved PNG. Offer to adjust layout, add components, or generate a `.mmd` file for further editing in mermaid.live or VS Code. ## Tips - `flowchart LR` for left-to-right pipelines and network flows - `flowchart TD` for top-down hierarchies and cloud stacks - Wide diagrams: increase `-w` (width); tall diagrams: increase `-H` (height) - For very complex diagrams, break into multiple diagrams - Always include a title comment at the top of the .mmd file: `%% Title: ...`

Frequently asked questions