mermaidjs-v11

Renders Markdown-embedded MIME v11 diagrams to interactive HTML.

Updated Mar 29, 2026
One-click install
npx skills add https://github.com/mchien15/wrenai --skill mermaidjs-v11-mchien15
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaidjs-v11
Source: https://github.com/mchien15/wrenai/tree/main/.claude/skills/mermaidjs-v11
Command: npx skills add https://github.com/mchien15/wrenai --skill mermaidjs-v11-mchien15

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Create diagrams with Mermaid.js v11 declarative syntax to visualize complex ideas, processes, and architectures.

Core Features & Use Cases

  • Supports a wide range of Mermaid.js v11 diagram types (flowchart, sequence, class, ER, Gantt, state, architecture, timeline, journey).
  • Provides guidance for inline diagrams in Markdown, documentation, and design specs with practical examples.
  • References CLI usage, HTML embedding, and per-diagram configuration via frontmatter.

Quick Start

Write a Mermaid.js v11 diagram in Markdown to render a basic flowchart.

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 in Markdown documentation?

Render Mermaid.js v11 diagrams in Markdown by writing declarative syntax directly into your files. The Skill parses the syntax and supports inline embedding for documentation, design specs, and architecture visualization.

What diagram types does Mermaid.js v11 support for visualizing architectures?

Mermaid.js v11 supports visualizing architectures through flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, timelines, and user journeys. It covers a wide range of data visualization and project planning needs.

Can I embed Mermaid.js diagrams in HTML with per-diagram configuration?

Yes, you can embed Mermaid.js diagrams in HTML with per-diagram configuration via frontmatter. The Skill provides guidance on HTML embedding and CLI usage, allowing granular control over individual diagram rendering settings.

What is the best way to generate sequence diagrams and ER diagrams from text?

Generate sequence and ER diagrams from text using Mermaid.js v11 declarative syntax. The Skill parses your text definitions and renders them into visual diagrams, making complex database schemas and process flows easy to document.

Does Mermaid.js v11 support exporting diagrams to SVG or PNG?

Yes, Mermaid.js v11 supports rendering to SVG and PNG formats. After parsing your declarative diagram syntax, the Skill can export the output to these image formats for integration into external documentation or presentations.

How do I create Gantt charts and timelines for project planning in Markdown?

Create Gantt charts and timelines for project planning in Markdown by writing Mermaid.js v11 syntax. The Skill parses the text-based timeline definitions and renders them directly within your Markdown files or HTML pages.