mermaid

Render Mermaid diagrams from Mermaid syntax to SVG or ASCII.

1|Updated Apr 23, 2026
One-click install
npx skills add https://github.com/Avaivartika/jiaoleaf-ai --skill mermaid-avaivartika
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/Avaivartika/jiaoleaf-ai/tree/main/extension/skills/custom/mermaid
Command: npx skills add https://github.com/Avaivartika/jiaoleaf-ai --skill mermaid-avaivartika

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagram rendering from Mermaid syntax to visual outputs, enabling quick diagram creation within documentation and design work.

Core Features & Use Cases

  • Built-in MCP tool: render_mermaid renders Mermaid diagrams to SVG or ASCII.
  • Theming support: apply predefined Mermaid themes for consistent visuals.
  • Diagram versatility: supports flowcharts, sequence diagrams, state diagrams, class diagrams, and ER diagrams.
  • Use case: generate a diagram from a code snippet or design description and paste the SVG into your docs.

Quick Start

Provide your Mermaid code and request a rendered diagram using the render_mermaid tool.

Frequently Asked Questions about mermaid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render Mermaid diagrams to SVG for documentation?▼

To render Mermaid diagrams to SVG, provide your Mermaid syntax code and request rendering using the render_mermaid tool. This generates visual SVG output suitable for pasting directly into your documentation files.

Does this support sequence diagrams and ER diagrams?▼

Yes, Mermaid rendering supports flowcharts, sequence diagrams, state diagrams, class diagrams, and ER diagrams. You can generate any of these diagram types from their corresponding Mermaid syntax definitions.

How do I apply themes to Mermaid diagrams?▼

You can apply themes to Mermaid diagrams by using the list_mermaid_themes tool to select predefined visual themes. This ensures consistent styling across all rendered SVG diagrams in your documentation.

What is the best way to convert Mermaid syntax into a visual flowchart?▼

The best way to convert Mermaid syntax into a visual flowchart is to pass the code snippet to the render_mermaid tool. The tool processes the syntax and outputs a formatted SVG or ASCII diagram for design work.

Can I generate a state diagram directly from a code snippet?▼

Yes, you can generate a state diagram directly from a Mermaid code snippet. The rendering tool parses the syntax and outputs the diagram as SVG or ASCII, which you can then paste into your design or documentation workflow.