skills.rest
iOfficeAI
iOfficeAIOFFICIAL
Explore all skills by this author →
Website𝕏@AionUiGitHub

mermaid

Render Mermaid diagrams into SVG or ASCII from files or stdin.

31.8k|3.2k|Updated Aug 7, 2025
Search Tags:#mermaid#rendering#CLI#svg#diagram#ascii
One-click install
npx skills add https://github.com/iOfficeAI/AionUi --skill mermaid-iofficeai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/iOfficeAI/AionUi/tree/main/skills/mermaid
Command: npx skills add https://github.com/iOfficeAI/AionUi --skill mermaid-iofficeai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires beautiful-mermaid, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Render Mermaid diagrams into SVG or ASCII representations from Mermaid syntax.

Core Features & Use Cases

  • Supports multiple diagram types (Flowchart, Sequence, State, Class, ER) and both SVG and ASCII outputs from files or stdin.
  • Ideal for documenting architectures, workflows, and data models in CLI-friendly or graphical formats.

Quick Start

Use a Mermaid diagram file: npx tsx scripts/render.ts diagram.mmd --output diagram.svg Render from stdin: echo "graph TD; A-->B" | npx tsx scripts/render.ts --stdin --ascii

Frequently Asked Questions about mermaid

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

FAQPage Schema
How do I render Mermaid diagrams to SVG or ASCII format from the command line?▼

Render Mermaid diagrams using the CLI by running `npx tsx scripts/render.ts diagram.mmd --output diagram.svg` for SVG or `--ascii` flag for ASCII output. The Skill accepts diagram files or stdin input and auto-installs the beautiful-mermaid dependency if needed.

Can I convert Mermaid syntax to ASCII diagrams for terminal output?▼

Yes, ASCII rendering is supported. Pipe Mermaid syntax to stdin with the `--stdin --ascii` flags to generate terminal-friendly ASCII diagrams, ideal for documentation that doesn't require graphical output.

What diagram types does Mermaid rendering support?▼

Flowchart, Sequence, State, Class, and ER diagrams are supported. Both SVG and ASCII outputs work with all diagram types, letting you visualize architectures, workflows, and data models in your preferred format.

Do I need to install Mermaid dependencies manually?▼

No. The Skill auto-installs the beautiful-mermaid library on first use if it's not already present, removing the need for manual setup before rendering diagrams.

Can I apply custom themes when rendering Mermaid diagrams to SVG?▼

Theming for SVG output is supported, allowing customization of diagram appearance. Check the Skill's documentation or command options for available theme parameters.

What's the best way to document system architectures and workflows in a CLI-friendly format?▼

Use Mermaid diagram rendering to convert architecture and workflow definitions into ASCII for terminal documentation or SVG for graphical presentations, making technical documentation accessible across environments.

Related Skills

Explore More Software Engineering Skills→
dhar174dhar174
1

mermaid-diagrams

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

Community
Intermediate
imxvimxv
799

pretty-mermaid

Convert Mermaid diagrams from .mmd sources into SVG or ASCII visuals.

Community
Advanced
Tiao553Tiao553
8

visual-explainer

Generate interactive Mermaid diagrams and HTML data visualizations for technical documentation.

Community
Advanced
neuro-synapseneuro-synapse
3

d2-diagram

Generate D2 diagram scripts from textual descriptions of system architectures.

Community
Advanced