New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Mermaid Graph Writer

by curiositech in curiositech/some_claude_skills

Writes precise, well-structured Mermaid diagrams for any visualization need.

MITAuto-check passedDevelopment

Install Mermaid Graph Writer

skills CLI
$ npx skills add curiositech/some_claude_skills --skill mermaid-graph-writer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install curiositech/some_claude_skills mermaid-graph-writer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/curiositech/some_claude_skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/mermaid-graph-writer .claude/skills/mermaid-graph-writer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
mermaid-graph-writer
GitHub stars
244
Token cost
~2.4k tokens
SKILL.md length
632 words
Files
5 (incl. scripts, references)
Skills in repo
95
Repo updated
First seen
Licence
MIT

At a glance

Writes precise, well-structured Mermaid diagrams for any visualization need.

  • Works in 6 steps: Descriptive Labels, Not Codes → Consistent Direction → Max 15 Nodes per Diagram → …
  • Creating flowcharts
  • SKILL.md covers When to Use, Diagram Type Selection, Flowchart Deep Dive (Most… and Sequence Diagram Essentials, plus 5 more sections
  • Runs Python scripts from its folder

What it does

Mermaid Graph Writer is an agent skill from curiositech/some_claude_skills. Writes precise, well-structured Mermaid diagrams for any visualization need. Use when creating flowcharts, sequence diagrams, state machines, ER models, timelines, mindmaps, Gantt charts, or any other Mermaid-supported diagram type. Activate on "mermaid", "diagram", "flowchart", "sequence diagram", "state diagram", "ER diagram", "visualize", "draw graph". NOT for rendering/exporting Mermaid to images (use mermaid-graph-renderer), ASCII art, or GUI-based design tools.

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including scripts and reference files (for example `.claude-plugin/plugin.json`, `CHANGELOG.md` and `references/diagram-types.md`).

It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: Claude skills that make my life easier. The licence is MIT.

When your agent uses it

  • Creating flowcharts
  • Sequence diagrams
  • Any other Mermaid-supported diagram type

Example prompts

  • “mermaid”
  • “diagram”
  • “flowchart”
  • “/mermaid-graph-writer”

Requirements

  • Python 3
  • Pre-approved tools (allowed-tools): Read, Write, Edit

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Descriptive Labels, Not Codes
  2. Consistent Direction
  3. Max 15 Nodes per Diagram
  4. Use Subgraphs for Grouping
  5. Label All Decision Edges
  6. Use Appropriate Edge Styles

What it can do on your machine

Read from SKILL.md and the folder at commit 6713fc7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mermaid Graph Writer loads about 2.4k tokens when it runs, and up to ~8.1k if it reads all its reference files. Until then it costs about 123 tokens; SKILL.md has 632 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~123
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from curiositech/some_claude_skills at commit 6713fc7, republished under its MIT licence (© curiositech). 632 words, ~2,373 tokens.

Download SKILL.mdSave it as .claude/skills/mermaid-graph-writer/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
mermaid-graph-writer
description
Writes precise, well-structured Mermaid diagrams for any visualization need. Use when creating flowcharts, sequence diagrams, state machines, ER models, timelines, mindmaps, Gantt charts, or any other Mermaid-supported diagram type. Activate on "mermaid", "diagram", "flowchart", "sequence diagram", "state diagram", "ER diagram", "visualize", "draw graph". NOT for rendering/exporting Mermaid to images (use mermaid-graph-renderer), ASCII art, or GUI-based design tools.
allowed-tools
Read, Write, Edit
argument-hint
[description-of-what-to-visualize]
metadata.category
Content & Writing
metadata.tags
mermaid, graph, writer, diagram, flowchart

Mermaid Graph Writer

Writes precise, well-structured Mermaid diagrams. Selects the optimal diagram type for the content, uses correct syntax, and produces diagrams that are readable by both humans (rendered) and agents (text DSL).

When to Use

✅ Use for:

  • Creating any Mermaid diagram from a description or data
  • Choosing the right diagram type for a visualization need
  • Refactoring prose decision trees into Mermaid flowcharts
  • Modeling system architectures, protocols, state machines, data models
  • Encoding temporal knowledge as timeline diagrams

❌ NOT for:

  • Rendering/exporting Mermaid to PNG/SVG/PDF (use mermaid-graph-renderer)
  • ASCII art or Unicode box-drawing (use diagramming-expert)
  • GUI-based design tools (Figma, etc.)

Diagram Type Selection

mermaid
flowchart TD
  A{What are you modeling?} -->|Branching logic| B[flowchart]
  A -->|Request/response over time| C[sequenceDiagram]
  A -->|States and transitions| D[stateDiagram-v2]
  A -->|Entities and relationships| E[erDiagram]
  A -->|Chronological evolution| F[timeline]
  A -->|Concept hierarchy| G[mindmap]
  A -->|Time-sequenced tasks| H[gantt]
  A -->|Proportions| I[pie]
  A -->|2-axis comparison| J[quadrantChart]
  A -->|Branch/merge history| K[gitGraph]
  A -->|Type hierarchy / OO| L[classDiagram]
  A -->|User experience steps| M[journey]
  A -->|Quantity flows| N[sankey-beta]
  A -->|Numeric data| O[xychart-beta]
  A -->|System components| P[block-beta]
  A -->|Infrastructure| Q[architecture-beta]
  A -->|Task board| R[kanban]
  A -->|Requirements traceability| S[requirementDiagram]
  A -->|System context / containers| T[C4Context]
  A -->|Protocol packets / headers| U[packet-beta]
  A -->|Multi-axis comparison| V[radar]
  A -->|Hierarchical proportions| W[treemap]
  A -->|Code-style sequences| X[zenuml]
Quick Reference
ContentTypeDirection
Decision tree / processflowchart TDTop-down for decisions, LR for processes
API protocol / agent commssequenceDiagramAlways vertical (implicit)
Lifecycle / status machinestateDiagram-v2Automatic layout
Database / data modelerDiagramAutomatic layout
"What changed when"timelineHorizontal chronological
Taxonomy / brainstormmindmapRadial from root
Project scheduleganttHorizontal timeline
Category proportionspieCircular
Effort vs. impactquadrantChart2D scatter
Git branching strategygitGraphHorizontal
Class/interface hierarchyclassDiagramAutomatic
User flow with satisfactionjourneyHorizontal sections
Flow quantities between categoriessankey-betaLeft-to-right flow
Bar/line chartsxychart-betaStandard axes
System block layoutblock-betaGrid-based
Cloud/infra topologyarchitecture-betaGrouped services
Task status columnskanbanColumn-based
Requirements traceabilityrequirementDiagramAutomatic layout
System context / containersC4Context / C4ContainerLayered (5 sub-types)
Protocol packets / headerspacket-betaHorizontal bit layout
Multi-axis scoringradarRadial axes
Hierarchical proportionstreemapNested rectangles
Code-style sequenceszenumlVertical (plugin)

Flowchart Deep Dive (Most Common)

Direction
  • TD / TB — top-down (best for decision trees)
  • LR — left-right (best for processes, pipelines)
  • BT — bottom-up (rare, for dependency graphs)
  • RL — right-left (rare)
Node Shapes
[text]       Rectangle (default action)
(text)       Rounded rectangle (soft step)
{text}       Diamond (decision/condition)
([text])     Stadium/pill (start/end)
[[text]]     Subroutine (subprocess)
[(text)]     Cylinder (database/storage)
((text))     Circle (event/trigger)
>text]       Flag (async/signal)
{{text}}     Hexagon (preparation)
[/text/]     Parallelogram (input/output)
[\text\]     Reverse parallelogram
[/text\]     Trapezoid
[\text/]     Reverse trapezoid
Edge Styles
-->          Solid arrow (main flow)
---          Solid line (association)
-.->         Dotted arrow (optional/async)
==>          Thick arrow (emphasis/critical path)
--text-->    Labeled edge
~~~          Invisible link (layout control only)
Subgraphs
mermaid
flowchart TD
  subgraph Backend
    A[API] --> B[DB]
  end
  subgraph Frontend
    C[UI] --> D[State]
  end
  C -->|fetch| A

Sequence Diagram Essentials

Messages
->>    Solid arrow (sync request)
-->>   Dotted arrow (async response)
-)     Open arrow (async fire-and-forget)
-x     Cross (failed/rejected)
Blocks
activate / deactivate    Lifeline activation
alt / else / end         Conditional branching
loop / end               Repetition
par / and / end          Parallel execution
critical / end           Critical section
break / end              Break-out flow
rect rgb(...)  / end     Background highlight
Numbering

Add autonumber after the first line to auto-number all messages.

State Diagram Essentials

[*] --> State1           Start transition
State1 --> State2        Named transition
State1 --> State2: event Labeled transition
State2 --> [*]           End transition

state State1 {          Nested states
  [*] --> SubA
  SubA --> SubB
}

state fork <<fork>>      Fork pseudostate
state join <<join>>      Join pseudostate
state choice <<choice>>  Choice pseudostate

ER Diagram Essentials

Cardinality
||--||    Exactly one to exactly one
||--o{    One to zero-or-many
}o--o{    Zero-or-many to zero-or-many
||--|{    One to one-or-many
Attributes
mermaid
erDiagram
  USER {
    int id PK
    string name
    string email UK
  }
  ORDER {
    int id PK
    int user_id FK
    date created_at
  }
  USER ||--o{ ORDER : places

Writing Principles

1. Descriptive Labels, Not Codes
  • ✅ A[Check if tests pass]
  • ❌ A[Step 2.3]
2. Consistent Direction

Pick one direction for the whole diagram. Don't mix TD and LR within the same flowchart.

3. Max 15 Nodes per Diagram

Beyond 15 nodes, split into multiple diagrams or use subgraphs. A crowded diagram is worse than no diagram.

4. Use Subgraphs for Grouping

When a diagram has natural clusters (frontend/backend, phases, teams), use subgraphs to group them visually.

Show full SKILL.md (258 more words)Show less
5. Label All Decision Edges

Every edge leaving a diamond ({decision}) node must have a label:

  • ✅ A{Ready?} -->|Yes| B and A -->|No| C
  • ❌ A{Ready?} --> B and A --> C (which is yes? which is no?)
6. Use Appropriate Edge Styles
  • Solid arrows for main flow
  • Dotted arrows for optional/async paths
  • Thick arrows for critical paths or emphasis
  • Invisible links (~~~) only for layout tweaking

Anti-Patterns

Wrong Diagram Type

Novice: Using a flowchart for everything — even protocols, state machines, and data models. Expert: Match diagram type to content structure. Sequence diagrams for protocols. State diagrams for lifecycle. ER for data models. Each type exists because flowcharts can't express that structure well.

Overcrowded Diagram

Novice: One diagram with 30 nodes and crossing edges. Expert: Split into overview diagram + detail diagrams. Use subgraphs. Max ~15 nodes per diagram.

Unlabeled Decision Edges

Novice: {Decision} --> A and {Decision} --> B — which condition leads where? Expert: Always label edges from decision diamonds: -->|Yes| and -->|No| (or -->|Success| and -->|Failure|, etc.)

Prose That Should Be a Diagram

Novice: "First check if X. If X then do A, otherwise do B. Then if A succeeds, do C, otherwise retry A." Expert: That's a flowchart. Write it as one. The formal graph is more precise AND more readable.

References

  • references/diagram-types.md — Consult for comprehensive syntax, features, and examples for all 23 Mermaid diagram types: timeline, mindmap, quadrant, sankey, XY chart, block, architecture, kanban, pie, gitgraph, class, journey, requirementDiagram, C4 (5 sub-types), packet-beta, radar, treemap, and zenuml
  • scripts/validate_mermaid.py — Validates Mermaid syntax in any file: checks diagram type declarations, matching fences, structural correctness

© curiositech, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files (scripts, references) in .claude/skills/mermaid-graph-writer of curiositech/some_claude_skills.

  • SKILL.md
  • .claude-plugin/plugin.json
  • CHANGELOG.md
  • references/diagram-types.md
  • scripts/validate_mermaid.py

Open the folder on GitHubat commit 6713fc7

Compare with similar skills

Mermaid Graph Writer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mermaid Graph Writer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mermaid Graph Writer this skillcuriositech/some_claude_skills244—~2.4kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify82k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT
Pretty Mermaid Rendererimxv/Pretty-mermaid-skills1.5k—~2kAutomated safety check: PassMIT
Archify Diagram BuilderUnclecheng-li/AI_Animation1.5k2 repos~4.1kAutomated safety check: PassMIT

Similar skills

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    82k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check: notes

  • Pretty Mermaid Renderer

    imxv/Pretty-mermaid-skills

    Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.

    1.5k GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    DevelopmentAuto-check passed

  • Mermaid

    WH-2099/mermaid-skill

    Generate Mermaid diagrams from user requirements. An agent skill from WH-2099/mermaid-skill.

    288 GitHub starsUsed in 4 repos~958 tokens
    DevelopmentAuto-check passed

More from curiositech/some_claude_skills

All 95 skills in this repo

  • Crisis Detection Intervention AI

    curiositech/some_claude_skills

    Detect crisis signals in user content using NLP, mental health sentiment analysis, and safe intervention protocols.

    244 GitHub starsUsed in 2 repos~3.8k tokens
    Auto-check passed

  • Form Validation Architect

    curiositech/some_claude_skills

    End-to-end form handling with react-hook-form, Zod schemas, validation patterns, error messaging, field arrays, and multi-step wizards.

    244 GitHub stars~3.8k tokensUpdated 1 mo ago
    Auto-check passed

  • GitHub Actions Pipeline Builder

    curiositech/some_claude_skills

    Build production CI/CD pipelines with GitHub Actions. An agent skill from curiositech/some_claude_skills.

    244 GitHub stars~2.8k tokensUpdated 1 mo ago
    Auto-check: notes

  • Background Job Orchestrator

    curiositech/some_claude_skills

    Expert in background job processing with Bull/BullMQ (Redis), Celery, and cloud queues.

    244 GitHub stars~3.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Competitive Cartographer

    curiositech/some_claude_skills

    Strategic analyst that maps competitive landscapes, identifies white space opportunities, and provides positioning recommendations.

    244 GitHub stars~1.3k tokensUpdated 1 mo ago
    Auto-check passed

  • Computer Vision Pipeline

    curiositech/some_claude_skills

    Build production computer vision pipelines for object detection, tracking, and video analysis.

    244 GitHub stars~4k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Mermaid Graph Writer

What does Mermaid Graph Writer do?

Writes precise, well-structured Mermaid diagrams for any visualization need. Mermaid Graph Writer is an agent skill from curiositech/some_claude_skills. Writes precise, well-structured Mermaid diagrams for any visualization need.

When should I use Mermaid Graph Writer?

Mermaid Graph Writer fits situations like: creating flowcharts; sequence diagrams; any other Mermaid-supported diagram type.

How do I install Mermaid Graph Writer in Claude Code?

Run `npx skills add curiositech/some_claude_skills --skill mermaid-graph-writer -a claude-code`. Or copy the skill folder (.claude/skills/mermaid-graph-writer in curiositech/some_claude_skills) into .claude/skills/mermaid-graph-writer in your project. Claude Code loads it when a task matches its description.

How do I install Mermaid Graph Writer in Codex?

Run `npx skills add curiositech/some_claude_skills --skill mermaid-graph-writer -a codex`. Or copy the skill folder (.claude/skills/mermaid-graph-writer in curiositech/some_claude_skills) into .agents/skills/mermaid-graph-writer in your project. Codex loads it when a task matches its description.

Can I use Mermaid Graph Writer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add curiositech/some_claude_skills --skill mermaid-graph-writer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mermaid-graph-writer, .gemini/skills/mermaid-graph-writer, .github/skills/mermaid-graph-writer and .opencode/skills/mermaid-graph-writer in your project.

What does Mermaid Graph Writer need to run?

Going by SKILL.md and its folder, Mermaid Graph Writer needs Python for the scripts in its folder. Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Write, Edit.

Does Mermaid Graph Writer access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Mermaid Graph Writer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Mermaid Graph Writer use?

Mermaid Graph Writer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mermaid Graph Writer use?

About 2.4k tokens (SKILL.md is roughly 9.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.7k tokens, read only when the agent opens those files.

What are the alternatives to Mermaid Graph Writer?

Skills that share tags, products or a category with Mermaid Graph Writer: Archify Diagrams (tt-a1i/archify, 82k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Pretty Mermaid Renderer (imxv/Pretty-mermaid-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mermaid Graph Writer?

curiositech (a GitHub organization) maintains it in curiositech/some_claude_skills, which has 244 GitHub stars. The repository holds 95 skills in this directory. The repository was last updated on September 6, 2026.

Source: curiositech/some_claude_skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.