skills.rest
luan-thnh
luan-thnhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mermaidjs-v11

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

Updated Jan 31, 2026
Search Tags:#architecture#documentation#mermaid#visualization#svg#diagrams#mermaid-cli
One-click install
npx skills add https://github.com/luan-thnh/hrm-auto-extension --skill mermaidjs-v11-luan-thnh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaidjs-v11
Source: https://github.com/luan-thnh/hrm-auto-extension/tree/main/.opencode/skills/mermaidjs-v11
Command: npx skills add https://github.com/luan-thnh/hrm-auto-extension --skill mermaidjs-v11-luan-thnh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Mermaid.js v11 enables teams to describe diagrams in plain text and render them as vector visuals.

Core Features & Use Cases

  • Declarative diagram syntax via Mermaid.js v11 for flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, architecture diagrams, and more.
  • CLI rendering to SVG/PNG/PDF and HTML embedding in browsers/markdown.
  • JavaScript API integration for programmatic rendering and dynamic diagrams.
  • Theming, configuration, and accessibility features to tailor visuals and ensure WCAG-friendly output.
  • Useful for documentation, system design, project planning, and technical communication.

Quick Start

Install Mermaid.js v11, write a diagram in Mermaid syntax, and render it to SVG/PNG/PDF using the CLI or embed in a page.

Frequently Asked Questions about mermaidjs-v11

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

FAQPage Schema
How do I generate diagrams from plain text for technical documentation?▼

Mermaid.js v11 lets you generate diagrams from plain text by writing declarative Mermaid syntax for flowcharts, sequence diagrams, and ER diagrams, then rendering that text into vector visuals.

What diagram types can I create using Mermaid syntax?▼

Mermaid syntax supports creating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, and architecture diagrams for documentation, system design, and project planning.

How do I render Mermaid diagrams to SVG or PNG using the command line?▼

You render Mermaid diagrams to SVG, PNG, or PDF by using the mermaid-cli to process your declarative text files. The CLI outputs vector visuals suitable for documentation and technical communication.

Can I embed Mermaid diagrams directly in HTML and markdown?▼

Yes, you can embed Mermaid diagrams directly in HTML and markdown for browser rendering. Mermaid.js v11 supports HTML embedding and a JavaScript API for programmatic rendering of dynamic diagrams.

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

Mermaid.js v11 supports theming, configuration, and accessibility features to tailor visuals and ensure WCAG-friendly output. This allows teams to customize diagram appearance while maintaining accessibility standards.

What is the best way to maintain architecture diagrams alongside code?▼

The best way to maintain architecture diagrams alongside code is using declarative Mermaid syntax that renders to vector visuals. Mermaid.js v11 enables teams to describe diagrams in plain text within markdown documentation.

Related Skills

Explore More Software Engineering Skills→
diegocanepadiegocanepa

mermaid-diagrams

Generate flowcharts, sequence diagrams, and class diagrams from Mermaid syntax.

Community
Basic
vuminhieuvuminhieu

mermaidjs-v11

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

Community
Intermediate
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
mindmorassmindmorass
2

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Community
Intermediate