Can I customize the look of my diagrams?

Yes, you can apply themes like default, forest, dark, or neutral, and define custom styles for nodes and edges within supported diagram types.

How does the live reload feature work?

It uses the mermaid_preview tool with a unique preview_id to render an SVG in your browser that updates automatically as Claude modifies the diagram code.

Which diagram types are supported?

It supports all major Mermaid types, including Flowcharts, Sequence Diagrams, Class Diagrams, Entity Relationship Diagrams (ERD), State Diagrams, and Gantt Charts.

How do I save the final diagram to my project?

Once you are satisfied with the preview, use the mermaid_save tool to export the diagram as an SVG file to your specified file path.

Mermaid Diagram Expert

Name: Mermaid Diagram Expert
Author: veelenga

byveelenga

•

学习与文档

Visualizes complex systems and logic through live-previewing Mermaid diagrams directly within your development workflow.

This skill transforms Claude into a visual architect by integrating Mermaid.js capabilities via an MCP server. It enables the creation, refinement, and export of high-quality technical visualizations including flowcharts, sequence diagrams, and database schemas with a live-reloading browser preview. By maintaining persistent preview IDs, the skill allows for an iterative design process where you can tweak syntax, themes, and layouts in real-time before saving the final production-ready SVG to your project documentation.

主要功能

01Live-reload rendering for real-time diagram refinement

02Support for flowcharts, sequence, class, ER, and state diagrams

03Persistent preview IDs for seamless multi-diagram workflows

04Multiple professional themes including dark, forest, and neutral

05High-quality SVG export for project documentation

0645 GitHub stars

使用场景

01Documenting complex API authentication and request lifecycles

02Mapping database entity relationships during the design phase

03Visualizing application logic and state machine transitions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add veelenga/claude-mermaid mermaid-diagrams

For use in Claude.ai and ChatGPT

Download Skill