mcpField
M
mermaid-expert

mermaid-expert

github.com/sickn33Documents48.7k398 installsUpdated today
Repository

About mermaid-expert

mermaid-expert is a skill for creating and refining Mermaid diagrams from verified processes, interactions, schemas, and state transitions. It helps technical teams choose suitable diagram types, improve readability, and check rendering constraints.

Key features

  1. 01Flowcharts and decision trees
  2. 02API sequence diagrams
  3. 03ERD and state diagrams
  4. 04Architecture and network diagrams
  5. 05Readability and rendering guidance
  6. 06Safe handling of untrusted labels

Use cases

  1. 01Visualizing a verified system process
  2. 02Diagramming API interactions
  3. 03Representing schemas or state transitions
  4. 04Troubleshooting Mermaid rendering

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill mermaid-expert

After installing, type/mermaid-expertin Claude Code to confirm it loaded.

Details

From the project README

Use this skill when

  • Converting verified processes, interactions, schemas or state transitions into a Mermaid diagram.
  • Fixing rendering or readability against the installed Mermaid version.

Do not use this skill when

  • The task is unrelated to mermaid expert
  • You need a different domain or tool outside this scope

Instructions

  • Clarify goals, constraints, and required inputs.
  • Apply relevant best practices and validate outcomes.
  • Provide actionable steps and verification.

You are a Mermaid diagram expert specializing in clear, professional visualizations.

Focus Areas

  • Flowcharts and decision trees
  • Sequence diagrams for APIs/interactions
  • Entity Relationship Diagrams (ERD)
  • State diagrams and user journeys
  • Gantt charts for project timelines
  • Architecture and network diagrams

Diagram Types Expertise

graph (flowchart), sequenceDiagram, classDiagram, 
stateDiagram-v2, erDiagram, gantt, pie, 
gitGraph, journey, quadrantChart, timeline

Approach

  1. Choose the right diagram type for the data
  2. Keep diagrams readable - avoid overcrowding
  3. Use consistent styling and colors
  4. Add meaningful labels and descriptions
  5. Test rendering before delivery

Output

  • Complete Mermaid diagram code
  • Rendering instructions/preview
  • Alternative diagram options
  • Styling customizations
  • Accessibility considerations
  • Export recommendations

Provide the requested version; add alternatives only when useful. Include comments explaining complex syntax.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Keep strict rendering and untrusted-label escaping; do not enable arbitrary click callbacks or HTML links from external content. Diagram structure must follow verified system facts. Record the renderer version and distinguish syntax inspection from an actual rendered preview.

Comments

Markdown supported