amw-mermaid-diagram

Author and modify Mermaid diagram source files across nine grammar types with lint validation.

Updated Jul 8, 2026
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-mermaid-diagram-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-mermaid-diagram
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-mermaid-diagram
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-mermaid-diagram-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing or editing Mermaid diagram source by hand often leads to syntax errors, inconsistent grammar choices, and broken renders. This Skill authors valid .mmd source from a natural-language brief or safely modifies an existing .mmd/.mermaid file, validating every output with a mmdc dry-run before delivery. ## Core Features & Use Cases - Create path: Converts a natural-language brief into Mermaid source, auto-selecting among 9 grammars (flowchart, sequenceDiagram, stateDiagram-v2, classDiagram, erDiagram, gantt, pie, journey, mindmap). - Modify path: Parses an existing .mmd file into an intermediate representation, applies label edits, re-renders to Mermaid source, and re-validates with a retry budget of 3. - Technique references: Ships 14 TECH reference files covering grammar syntax, edge styles, subgraphs, activations, and best practices per diagram type. - Use Case: Ask for an ER diagram of your database schema; the Skill emits a lint-validated schema.mmd file with proper crowsfoot cardinality, PK/FK markers, and a job-completion report. ## Quick Start Ask the assistant to create a Mermaid sequence diagram for your login flow, or to edit the labels in an existing .mmd file at a given path.

Frequently Asked Questions about amw-mermaid-diagram

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

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

Provide a natural-language brief describing the flow, schema, or interaction. The Skill selects the right grammar (flowchart for processes, sequenceDiagram for request/response, erDiagram for database schemas) and emits a lint-validated .mmd source file.

How to edit an existing Mermaid .mmd file programmatically?▼

Point the Skill at the existing .mmd or .mermaid file and describe the change. It parses the source into an intermediate representation, applies label edits on nodes or edges, re-renders the Mermaid source, and validates it with an mmdc dry-run.

Which Mermaid diagram types are supported?▼

Nine grammars are supported: flowchart, sequenceDiagram, stateDiagram-v2, classDiagram, erDiagram, gantt, pie, journey, and mindmap. Each grammar has dedicated technique reference files covering syntax and best practices.

Does this skill render Mermaid to SVG or PNG?▼

No, rendering is intentionally delegated to the separate amw-mermaid-render skill. This skill only produces and modifies .mmd source; you chain it with amw-mermaid-render.sh to get SVG, PNG, or ASCII output.

Why does my Mermaid file fail validation?▼

Common causes are syntax typos in node or edge definitions, unquoted labels containing spaces or special characters, and semicolons instead of newline separators. The lint report is returned verbatim and the original file is left untouched on failure.