skills.rest
Thanh-apero
Thanh-aperoCOMMUNITY
Explore all skills by this author →
GitHub

mermaidjs-v11

Creates and renders Mermaid.js v11 diagrams from markdown to SVG, PNG, PDF via CLI.

1|1|Updated Jan 15, 2026
Search Tags:#technical documentation#diagram rendering#Mermaid.js#diagram creation#diagram syntax
One-click install
npx skills add https://github.com/Thanh-apero/apero-kit-cli --skill mermaidjs-v11-thanh-apero
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaidjs-v11
Source: https://github.com/Thanh-apero/apero-kit-cli/tree/main/templates/skills/mermaidjs-v11
Command: npx skills add https://github.com/Thanh-apero/apero-kit-cli --skill mermaidjs-v11-thanh-apero

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, mermaid, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the problem of manually creating diagrams, offering a way to generate diagrams with Mermaid.js v11 syntax, simplifying the process for various diagram types.

Core Features & Use Cases

  • Diagrams Creation: Supports 24+ diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, architecture diagrams, timelines, and user journeys.
  • Syntax Support: Utilizes Mermaid.js v11 syntax for declarative diagram creation.
  • Integration: Easy integration into CLI, markdown files, and web pages with HTML embedding and JavaScript API.

Quick Start

Generate a flowchart with the mermaidjs-v11 skill using the following command: mmdc -i flowchart-input.mmd -o flowchart-output.svg.

Frequently Asked Questions about mermaidjs-v11

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

FAQPage Schema
How do I create diagrams from markdown files for technical documentation?▼

Mermaid.js v11 lets you generate technical documentation diagrams declaratively, converting markdown syntax directly into rendered SVG, PNG, or PDF outputs via the mermaid-cli command line tool.

What diagram types can I generate using Mermaid.js v11 syntax?▼

Mermaid.js v11 syntax supports creating over 24 diagram types, including flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, architecture diagrams, timelines, and user journeys.

Can I use mermaid-cli to convert markdown to SVG and PNG outputs?▼

Yes, you can use mermaid-cli to convert markdown files into SVG, PNG, and PDF formats by running the mmdc command with input markdown files and specified output file extensions.

Does this Mermaid.js skill work for visualizing system architecture and code reviews?▼

Yes, this skill is suitable for visualizing system architecture and code reviews, rendering complex structural relationships into clear diagrams using Mermaid.js v11 syntax.

How do I embed Mermaid.js diagrams into web pages and HTML?▼

To embed Mermaid.js diagrams into web pages and HTML, utilize the provided JavaScript API and HTML embedding integration to render v11 syntax directly in browsers.

What is the best way to generate flowcharts without manually drawing them?▼

The best way to generate flowcharts without manual drawing is using Mermaid.js v11 declarative syntax, which automatically renders text definitions into visual diagrams via the mermaid-cli tool.

Related Skills

Explore More Software Engineering Skills→
DatTran26DatTran26

ck:mermaidjs-v11

Create Mermaid.js v11 diagrams and render them to SVG, PNG, or PDF.

Community
Intermediate
kettleofketchupkettleofketchup
13

mermaidjs-v11

Generate Mermaid.js v11 diagrams from text definitions.

Community
Intermediate
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
lv7devlv7dev

mermaidjs-v11

Generate flowcharts, sequence, class, and ER diagrams from text using Mermaid.js v11.

Community
Intermediate