mermaidjs-v11

Render Mermaid.js v11 diagrams to SVG, PNG, or PDF via CLI.

Updated Feb 2, 2026
One-click install
npx skills add https://github.com/vuminhieu/spexor-client --skill mermaidjs-v11-vuminhieu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaidjs-v11
Source: https://github.com/vuminhieu/spexor-client/tree/main/.agent/skills/skills/mermaidjs-v11
Command: npx skills add https://github.com/vuminhieu/spexor-client --skill mermaidjs-v11-vuminhieu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Mermaid.js v11 diagrams are created from text definitions but can be hard to integrate into docs pipelines; this skill streamlines that process by converting code blocks into consistent visuals.

Core Features & Use Cases

  • Diagram generation from Mermaid.js v11 syntax to SVG/PNG/PDF via CLI or programmatic rendering.
  • In-browser embedding with JavaScript API for dynamic diagrams in web apps and docs.
  • Versatile diagram types including flowchart, sequence, class, state, ER, Gantt, journey, and more for architecture and planning.

Quick Start

Create a file named diagram.mmd containing Mermaid.js v11 definitions such as: flowchart TD A-->B Then render with the CLI: mmdc -i diagram.mmd -o diagram.svg, or embed using Mermaid in HTML with mermaid.initialize({ startOnLoad: true }).

Frequently Asked Questions about mermaidjs-v11

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

FAQPage Schema
How do I render Mermaid.js v11 diagrams to SVG or PNG for technical documentation?

You can render Mermaid.js v11 diagrams to SVG or PNG by writing text definitions in a .mmd file and executing the mmdc CLI tool to output the desired visual format.

What is the best way to integrate Mermaid.js v11 flowcharts into a docs pipeline?

Integrating Mermaid.js v11 flowcharts into docs pipelines is streamlined by converting text code blocks into consistent visuals via CLI rendering or programmatic APIs.

Can I use Mermaid.js v11 for dynamic in-browser embedding in web apps?

Yes, you can use Mermaid.js v11 for dynamic in-browser embedding by utilizing the JavaScript API with mermaid.initialize to render diagrams directly within HTML pages.

Does the Mermaid.js v11 CLI support exporting architecture diagrams to PDF?

Yes, the Mermaid.js v11 CLI supports exporting architecture diagrams to PDF, SVG, and PNG formats, providing repeatable visuals for technical documentation and process maps.

What diagram types can I generate from text definitions using Mermaid.js v11?

You can generate versatile diagram types from text definitions including flowcharts, sequence, class, state, ER, Gantt, and journey diagrams for architecture and planning.