/ Annuaire / Playground / mermaid-skill
← Tous les serveurs ↗ GitHub
● Communauté Agents365-ai ⚡ Instantané

mermaid-skill

par Agents365-ai · Agents365-ai/mermaid-skill

Generate Mermaid diagrams (.mmd) inside Claude Code and render to PNG/SVG/PDF via mmdc — 10+ diagram types, automatic layout.

A Claude Code skill that handles the full Mermaid loop: writes .mmd source, invokes mmdc to render, and supports the major Mermaid types (flowchart, sequence, class, state, ERD, gantt, git graph, journey, mindmap, C4). No more pasting into Mermaid live editor.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

mermaid-skill.replay ▶ prêt
0/0

Installation

Dépôt de l’auteur · Documentation officielle des Skills Claude

Cas d'usage

Usages concrets : mermaid-skill

Draw an architecture diagram for your current project

👤 Devs writing docs, ADRs, or onboarding guides ⏱ ~20 min beginner

Quand l'utiliser : You keep explaining your architecture in Slack and want a picture.

Déroulement
  1. Describe the system
    Use mermaid-skill. Draw a flowchart of our service: client → API gateway → (auth / orders / payments) → Postgres / Redis / Stripe.✓ Copié
    → .mmd source with meaningful node names, rendered to PNG in docs/
  2. Add details
    Add labels on each edge showing the protocol (HTTPS, gRPC, TCP) and auth type.✓ Copié
    → Updated source and re-render
  3. Commit it
    Commit docs/architecture.mmd and its PNG.✓ Copié
    → git add and commit run

Résultat : A living diagram in the repo, not a stale slide in Confluence.

Pièges
  • Diagram becomes a maze of edges — Let Claude use subgraphs and direction hints; don't cram everything on one layer
Combiner avec : filesystem · git

Produce a sequence diagram while debugging

👤 Engineers tracing a cross-service bug ⏱ ~15 min beginner

Quand l'utiliser : You're trying to understand an async interaction and English isn't cutting it.

Déroulement
  1. Describe the flow
    Use mermaid-skill. Sequence diagram: browser → SSR → auth service → session store → page render, with failure mode when session is stale.✓ Copié
    → Sequence diagram with the failure annotated
  2. Annotate the bug
    Highlight the line where the bug manifests.✓ Copié
    → Annotated box/note on the offending message

Résultat : A picture you can paste in the bug ticket.

Generate an ERD from your actual database schema

👤 Data engineers, backend devs ⏱ ~20 min intermediate

Quand l'utiliser : You want a visual of your schema for a design review.

Déroulement
  1. Introspect
    Use mermaid-skill. Read the schema.sql (or query the live DB via postgres MCP) and produce a Mermaid ERD.✓ Copié
    → .mmd ERD with relationships and cardinalities
  2. Trim noise
    Drop audit tables and focus on the core domain entities.✓ Copié
    → Trimmed ERD

Résultat : An accurate ERD without manual drawing.

Pièges
  • Cardinalities wrong when inferred — Provide the actual foreign-key definitions; don't let the model guess
Combiner avec : postgres

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

mermaid-skill + filesystem

Keep diagrams alongside the code they describe

For every service in services/, add a docs/architecture.mmd and render it.✓ Copié
mermaid-skill + postgres

Auto-generate ERDs from live databases

Connect to the staging DB and render its schema as a Mermaid ERD.✓ Copié
mermaid-skill + git

Diagram stays versioned with code changes

Commit updated diagrams in the same PR as the code changes they describe.✓ Copié

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
write_mermaid description, diagram type Any diagram request 0
render_mmdc .mmd path, output format After source is final local mmdc
iterate_diagram current diagram + feedback Reviewer feedback 0

Coût et limites

Coût d'exécution

Quota d'API
None
Tokens par appel
Small — Mermaid source is compact
Monétaire
Free (mmdc is open source)
Astuce
For big diagrams, generate subgraphs separately to avoid retrying large rewrites.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : None
Sortie de données : None from skill itself

Dépannage

Erreurs courantes et correctifs

mmdc not found

Install globally: npm i -g @mermaid-js/mermaid-cli

Vérifier : which mmdc
Render fails with syntax error

Mermaid has version-specific syntax; run mmdc --version and match the skill's assumed version

Vérifier : mmdc --version
Diagram is a mess of crossing edges

Add direction hints (TD/LR), group with subgraphs, or split into multiple diagrams

Alternatives

mermaid-skill vs autres

AlternativeQuand l'utiliserCompromis
PlantUML / draw.ioYou need more control or non-Mermaid syntaxMore setup, different rendering toolchain
paperbanana-skillAcademic publication-quality diagramsHeavier; different aesthetic goals

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills