skills.rest
OpenLAIR
OpenLAIROFFICIAL
Explore all skills by this author →
GitHub

aris-mermaid-diagram

Generate Mermaid diagrams from requirements with syntax verification and rendered PNG review.

1.1k|116|Updated Feb 26, 2026
Search Tags:#Mermaid#diagram generation#Documentation#Visualization#Flowchart#architecture diagram#kaTeX
One-click install
npx skills add https://github.com/OpenLAIR/dr-claw --skill aris-mermaid-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aris-mermaid-diagram
Source: https://github.com/OpenLAIR/dr-claw/tree/main/skills/aris-mermaid-diagram
Command: npx skills add https://github.com/OpenLAIR/dr-claw --skill aris-mermaid-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli.

What problem does it solve?

Writing Mermaid diagrams by hand often leads to syntax errors, wrong arrow directions, and unverified output that breaks when rendered. This Skill generates Mermaid code from natural-language requirements, saves it to files, verifies it with the Mermaid CLI, and iterates until the rendered diagram passes a strict visual review.

Core Features & Use Cases

  • 23 Diagram Types: Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, C4 architecture, Sankey, mindmaps, and more.
  • Verified Output: Saves both .mmd source and .md preview files to a figures/ directory, then renders a PNG via mmdc to confirm the syntax is valid.
  • Academic & Math Support: Includes CVPR/ICLR/NeurIPS styling guidelines and KaTeX math notation for publication-quality diagrams.
  • Use Case: Ask for a system architecture diagram for a paper, and receive a rendered, reviewed PNG plus reusable source files with correct arrows and professional styling.

Quick Start

Generate a Mermaid flowchart of the user login process and save the verified files to the figures directory.

Frequently Asked Questions about aris-mermaid-diagram

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

FAQPage Schema
How do I generate a Mermaid diagram from a text description?▼

Describe the diagram you need in natural language, including components and connections. The Skill selects the appropriate diagram type, writes the Mermaid code, saves .mmd and .md files to figures/, and renders a PNG to verify correctness.

What diagram types does Mermaid support?▼

This Skill supports 23 types including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, mindmaps, timelines, git graphs, C4 architecture, Sankey, XY charts, Kanban, radar charts, treemaps, and user journeys.

Can Mermaid diagrams include math formulas and LaTeX notation?▼

Yes, Mermaid v10.9.0+ renders KaTeX math inside quoted node and edge labels using $$ delimiters. This works in flowcharts and sequence diagrams, supporting fractions, Greek letters, subscripts, matrices, and summations.

Why does my Mermaid diagram fail to render with mmdc?▼

Common causes include unquoted special characters in labels, using \n instead of <br/> for line breaks, and unquoted $$ math delimiters. The Skill reads the mmdc error, fixes both source files, and re-renders up to three times.

How do I make Mermaid diagrams suitable for academic papers?▼

Apply the built-in CVPR/ICLR/NeurIPS style guide: white background, sans-serif fonts, 3-5 coordinated colors, thick dark arrows with labels, left-to-right flow, and no rainbow palettes or 3D effects. The diagram must remain readable in grayscale.

Related Skills

Explore More Software Engineering Skills→
NotysotyNotysoty
9

Architecture Explainer

Document system architecture by mapping layers, components, data flows, and external dependencies into ASCII diagrams.

Community
Advanced
mlamla123mlamla123

paper-diagrams

Generate publication-quality diagrams from project descriptions using a multi-agent pipeline.

Community
Intermediate
Tandem-DigitalTandem-Digital

revisar-leccion

Reviews educational lessons for accuracy, completeness, and currency against official Claude Code documentation.

Official
Intermediate
monforjemonforje

drawio-diagrams

Create draw.io diagrams from structured data with Python scripts.

Community
Advanced