creating-mermaid-diagrams

Q: How do I install creating-mermaid-diagrams?

Run npx skills add https://github.com/agents365-ai/365-skills --skill creating-mermaid-diagrams in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/creating-mermaid-diagrams/ (personal) or .claude/skills/creating-mermaid-diagrams/ (project).

by agents365-aiDocs & Writing

Generate Mermaid diagrams (.mmd) and export to PNG/SVG/PDF using mmdc CLI or Kroki API. USE THIS SKILL when user mentions diagram, flowchart, sequence diagram, class diagram, ER diagram, state machine, architecture, visualize, git graph, 画图, 架构图, 流程图, 时序图. PROACTIVELY USE when explaining ANY system with 3+ components, API flows, authentication sequences, class hierarchies, database schemas, or state machines. Supports 11+ diagram types with fully automatic layout.

Installs: 4.2K
Last 24h: —
Trending rank: —
Security: Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/agents365-ai/365-skills --skill creating-mermaid-diagrams

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads creating-mermaid-diagrams automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·This skill is safe to use. It provides tools for generating Mermaid diagrams and exporting them using the local mmdc CLI or the Kroki API. It includes a standard update mechanism via Git that requires user consent.

Socket PassNo alerts

Snyk PassLOW ·Risk: LOW · No issues

SKILL.md

The instructions your agent reads when the skill is triggered.

Mermaid Diagrams

Generate .mmd text files and export to PNG/SVG/PDF using mmdc (local) or Kroki API (no install).

Key advantage: Text-based syntax with fully automatic layout — no x/y coordinates needed.

Prerequisites

Option A: Local (mmdc)

npm install -g @mermaid-js/mermaid-cli
mmdc --version

Option B: Kroki API (no install)

curl --version  # Just need curl

Workflow

Update check (notify, don't pull) — first use per conversation. Throttle to once per 24 h via <this-skill-dir>/.last_update; never mutate the skill directory without explicit user consent.
- If .last_update exists and is <24 h old, skip this step entirely.
- Otherwise, fetch the latest tag from upstream:
```
git -C <this-skill-dir> ls-remote --tags origin 'v*' 2>/dev/null \
  | awk '{print $2}' | sed 's|refs/tags/||' | sort -V | tail -1
```
- Compare with this skill's metadata.version from the frontmatter. If the upstream tag is strictly newer (semver), tell the user one line and ask:
  
  "A newer version of this skill is available: vX.Y.Z → vA.B.C. Want me to git pull?"
  
  If they say yes, run git -C <this-skill-dir> pull --ff-only. Refresh .last_update either way so the prompt doesn't repeat for 24 hours.
- If upstream is the same or older, refresh .last_update silently and continue.
- On any failure (offline, not a git checkout — e.g. ClawHub-installed copy, read-only path, no permission), swallow the error silently and continue with the user's task. Do not mention the failure.
Check deps — try mmdc --version, fallback to Kroki if unavailable
Pick diagram type — choose from table below
Generate — write .mmd file to disk
Validate — run validation (REQUIRED before export)
Export — use mmdc or Kroki API to produce PNG/SVG/PDF
Report — tell user the output file paths

Validation (Required)

NEVER export a diagram without validating first.

# Validate with mmdc (local)
mmdc -i diagram.mmd -o /tmp/test.png 2>&1

# Validate with Kroki (if mmdc unavailable)
curl -s -X POST -H "Content-Type: text/plain" --data-binary @diagram.mmd https://kroki.io/mermaid/svg -o /tmp/test.svg && echo "Valid" || echo "Invalid"

# If error, fix the .mmd file and validate again
# Only proceed to export after validation passes

Common validation errors:

Missing quotes around labels with special characters
Wrong arrow syntax (use ->> for sequence, --> for flowchart)
Undeclared participants in sequence diagrams

Diagram Types

Type	Keyword	Use for
Flowchart	`flowchart TD/LR`	processes, pipelines, decisions
Sequence	`sequenceDiagram`	API calls, message passing
Class	`classDiagram`	OOP models, data structures
ER	`erDiagram`	database schemas
State	`stateDiagram-v2`	state machines, lifecycle
Gantt	`gantt`	project timelines
Pie	`pie`	proportions
Git Graph	`gitGraph`	branch strategies
C4 Context	`C4Context`	high-level architecture
Mind Map	`mindmap`	topic breakdowns

Syntax Reference

Flowchart: See reference/FLOWCHART.md Sequence: See reference/SEQUENCE.md Class & ER: See reference/CLASS-ER.md Other types: See reference/OTHER-TYPES.md

Examples

Example 1: API Authentication Flow

User prompt:

Create a sequence diagram for JWT authentication

Generated .mmd:

sequenceDiagram
  participant C as Client
  participant G as API Gateway
  participant A as Auth Service
  participant D as Database

  C->>G: POST /login {email, password}
  G->>A: validate(credentials)
  A->>D: SELECT user WHERE email=?
  D-->>A: user record
  A-->>A: verify password hash
  A-->>G: 200 OK + JWT token
  G-->>C: {token: "eyJhbG..."}

Output files: auth-flow.mmd + auth-flow.png

Example 2: Microservices Architecture

User prompt:

Draw an e-commerce microservices architecture

Generated .mmd:

flowchart TD
  subgraph Clients
    M[Mobile App]
    W[Web App]
  end

  GW[API Gateway]

  subgraph Services
    US[User Service]
    OS[Order Service]
    PS[Product Service]
    PAY[Payment Service]
  end

  subgraph Data
    UDB[(User DB)]
    ODB[(Order DB)]
    PDB[(Product DB)]
    REDIS[(Redis Cache)]
  end

  M & W --> GW
  GW --> US & OS & PS & PAY
  US --> UDB
  OS --> ODB
  PS --> PDB
  PAY --> REDIS

Output files: ecommerce-arch.mmd + ecommerce-arch.png

Example 3: Order State Machine

User prompt:

Show order lifecycle states

Generated .mmd:

stateDiagram-v2
  [*] --> Pending : order created
  Pending --> Confirmed : payment success
  Pending --> Cancelled : timeout/cancel
  Confirmed --> Shipped : dispatched
  Shipped --> Delivered : received
  Delivered --> [*]
  Cancelled --> [*]

Output files: order-states.mmd + order-states.png

Export Commands

Option 1: Local Export (mmdc)

Requires mmdc installed locally. Best for offline use.

# PNG (recommended: 2048px wide, white background)
mmdc -i diagram.mmd -o diagram.png -w 2048 --backgroundColor white

# PNG with theme (default | dark | neutral | forest | base)
mmdc -i diagram.mmd -o diagram.png -w 2048 --backgroundColor white --theme neutral

# SVG
mmdc -i diagram.mmd -o diagram.svg

# PDF
mmdc -i diagram.mmd -o diagram.pdf

Option 2: Kroki API (No Install Required)

Use Kroki when mmdc is not available. No local dependencies needed.

# SVG via Kroki
curl -X POST -H "Content-Type: text/plain" --data-binary @diagram.mmd https://kroki.io/mermaid/svg -o diagram.svg

# PNG via Kroki
curl -X POST -H "Content-Type: text/plain" --data-binary @diagram.mmd https://kroki.io/mermaid/png -o diagram.png

# PDF via Kroki
curl -X POST -H "Content-Type: text/plain" --data-binary @diagram.mmd https://kroki.io/mermaid/pdf -o diagram.pdf

Kroki advantages:

No local installation required
Works on any system with curl
Supports 20+ diagram types (PlantUML, GraphViz, D2, etc.)

When to use Kroki:

mmdc installation fails
Quick one-off diagrams
CI/CD pipelines without Node.js

Common Mistakes

Mistake	Fix
`mmdc` not found	`npm install -g @mermaid-js/mermaid-cli`
Wrong arrow in sequence	Use `->>` for request, `-->>` for response
Special chars in label	Wrap in quotes: `A["Label: value"]`
Blank/small output	Add `-w 2048` flag
Participant order wrong	Declare `participant` explicitly at top
Subgraph name with spaces	Wrap in quotes: `subgraph "My Layer"`

FAQ

What does the creating-mermaid-diagrams skill do?

How do I install creating-mermaid-diagrams?

Run npx skills add https://github.com/agents365-ai/365-skills --skill creating-mermaid-diagrams in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/creating-mermaid-diagrams/ (personal) or .claude/skills/creating-mermaid-diagrams/ (project).

Which AI agents can use creating-mermaid-diagrams?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is creating-mermaid-diagrams safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains creating-mermaid-diagrams?

It is published by agents365-ai in agents365-ai/365-skills. It has 4,155 recorded installs.

More from agents365-ai/365-skills

View all →

drawio-skill

agents365-ai/365-skills

Create, edit, synchronize, inspect, test, and publish editable draw.io diagrams. Use when the user explicitly requests draw.io/diagrams.net, needs a polished architecture, ERD, UML, sequence, C4, SysML, BPMN, network, swimlane, ML, or infrastructure diagram, wants code/IaC/SQL/OpenAPI/AsyncAPI/Protobuf converted into a diagram, or wants an existing diagram queried, reviewed, diffed, restyled, kept in sync, or made interactive. Prefer Mermaid/PlantUML elsewhere when the requested artifact is diagrams-as-code rather than an editable draw.io file.

Docs & Writing9K installs

excalidraw

agents365-ai/365-skills

Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via Kroki API or locally using excalidraw-brute-export-cli.

Backend & APIs4.6K installs

plantuml-skill

agents365-ai/365-skills

Use when user requests diagrams, flowcharts, sequence diagrams, class diagrams, component diagrams, ER diagrams, architecture charts, or visualizations — including generating a diagram from existing source code, or rendering/extracting PlantUML embedded in a Markdown file to images (e.g. preparing docs for Confluence/Notion). Also use proactively when explaining systems with 3+ components, APIs, data flows, or class hierarchies. Generates .puml files and exports to PNG/SVG via Kroki API (no local install required).

Docs & Writing4.1K installs

tldraw-skill

agents365-ai/365-skills

Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .tldr JSON files and exports to PNG/SVG locally using @kitschpatrol/tldraw-cli.

Code Quality & Workflow3.7K installs

paper-fetch

agents365-ai/365-skills

Use whenever the user wants to obtain, download, or fetch a paper's PDF — given a DOI, an arXiv id, a paper title, a citation, or a list of DOIs. Trigger on phrases like "download this paper", "find the PDF for [DOI]", "grab me the [Nature/bioRxiv/arXiv] paper on X", "get the open-access version", "I need this article", or any bulk/batch paper download request, even when the user doesn't explicitly say "PDF" or "DOI". Resolves via Unpaywall → Semantic Scholar → arXiv → PubMed Central → bioRxiv/medRxiv → publisher direct (institutional opt-in) → Sci-Hub mirrors as last-resort fallback.

Education & Science3.4K installs

semanticscholar-skill

agents365-ai/365-skills

Use when searching academic papers, looking up citations, finding authors, or getting paper recommendations using the Semantic Scholar API. Triggers on queries about research papers, academic search, citation analysis, or literature discovery.

Education & Science3.4K installs

Popular docs & writing skills

View category →

grill-with-docs

mattpocock/skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs

creating-mermaid-diagrams

Install

Install

Describe the task

Review the result

Security audits

SKILL.md

Mermaid Diagrams

Prerequisites

Workflow

Validation (Required)

Diagram Types

Syntax Reference

Examples

Example 1: API Authentication Flow

Example 2: Microservices Architecture

Example 3: Order State Machine

Export Commands

Option 1: Local Export (mmdc)

Option 2: Kroki API (No Install Required)

Common Mistakes

FAQ

More from agents365-ai/365-skills

Popular docs & writing skills