skills.rest
vibery-studio
vibery-studioOFFICIAL
Explore all skills by this author →
GitHub

mermaidjs-v11

Generate and render Mermaid.js v11 diagrams into SVG, PNG, or PDF.

3|1|Updated Dec 21, 2025
Search Tags:#documentation#mermaid#cli#diagrams#embedding#mermaidjs
One-click install
npx skills add https://github.com/vibery-studio/templates --skill mermaidjs-v11-vibery-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaidjs-v11
Source: https://github.com/vibery-studio/templates/tree/main/skills/mermaidjs-v11
Command: npx skills add https://github.com/vibery-studio/templates --skill mermaidjs-v11-vibery-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Create and render diagrams from Mermaid.js v11 declarative syntax to SVG/PNG/PDF, enabling rapid visualization without leaving text.

Core Features & Use Cases

  • Diagram variety: supports 24+ diagram types including flowchart, sequence, class, state, ER, Gantt, journey, and architecture diagrams.
  • Rendering & embedding: CLI rendering to SVG/PNG/PDF and easy embedding in Markdown or HTML for documentation.
  • Integration: JavaScript API for programmatic rendering and dynamic diagram generation in apps and docs.
  • Theming & accessibility: supports themes, configuration, and accessibility features for inclusive visuals.

Quick Start

Create a simple diagram using Mermaid syntax and render it with the mermaid CLI or embed it in a web page.

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 diagrams into SVG or PNG files using the command line?▼

You can render Mermaid.js diagrams into SVG, PNG, or PDF files using the command line interface (CLI). CLI rendering converts declarative syntax directly into visual assets for documentation.

What diagram types are supported in Mermaid.js v11?▼

Mermaid.js v11 supports 24+ diagram types including flowcharts, sequence, class, state, ER, Gantt, journey, timeline, and architecture diagrams. These cover technical planning and architecture reviews.

Can I embed Mermaid diagrams directly into HTML or Markdown documentation?▼

Yes, you can embed Mermaid diagrams directly into HTML or Markdown documentation. This enables rapid visualization of diagrams without leaving your text editor.

Does Mermaid.js v11 support theming and accessibility features for diagrams?▼

Yes, Mermaid.js v11 supports theming, configuration, and accessibility features. This ensures inclusive visuals and customizable styling for your generated diagrams.

How do I use the JavaScript API for programmatic diagram generation?▼

You can use the JavaScript API integration for programmatic rendering and dynamic diagram generation in apps. This allows automated creation of flowcharts and sequence diagrams within web pages.

Related Skills

Explore More Software Engineering Skills→
luan-thnhluan-thnh

mermaidjs-v11

Render Mermaid.js v11 diagrams from plain text to SVG, PNG, or PDF.

Community
Advanced
quanganh208quanganh208

ck:mermaidjs-v11

Convert Mermaid v11 diagram definitions into SVG, PNG, or PDF images.

Community
Intermediate
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
claude-office-skillsclaude-office-skills
368

diagram-creator

Generate flowcharts, sequence diagrams, and architecture diagrams from Mermaid and PlantUML text.

Official
Intermediate