Mermaid Syntax
Mermaid Syntax is a comprehensive reference skill covering all 23 Mermaid diagram types, configuration, theming, and common syntax errors. Look up syntax rules for flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, C4 diagrams, and others, then apply the patterns to your own diagrams. Includes troubleshooting guidance for frequent parsing issues and layout optimization tips for C4 diagrams.
Mermaid Syntax provides reference documentation for all 23 Mermaid diagram types, syntax rules, and configuration options.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Mermaid Syntax provides reference documentation for all 23 Mermaid diagram types, syntax rules, and configuration options. Mermaid Syntax is a comprehensive reference skill covering all 23 Mermaid diagram types, configuration, theming, and common syntax errors. Look up syntax rules for flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, C4 diagrams, and others, then apply the patterns to your own diagrams. Includes troubleshooting guidance for frequent parsing issues and layout optimization tips for C4 diagrams.
Use it when
- Mermaid Syntax teaches you the language rules and syntax for each of the 23 diagram types.
- Mermaid Syntax provides examples and patterns for flowcharts alongside syntax rules for all diagram types.
Install
tractorjuice/arc-kit/mermaid-syntax · repository language: JavaScript
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Mermaid Syntax and what diagram types does it cover?
Mermaid Syntax is a comprehensive reference skill covering all 23 Mermaid diagram types, configuration, theming, and common syntax errors. It provides syntax rules for flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, C4 diagrams, and others. Use this skill to look up syntax patterns, apply them to your own diagrams, and troubleshoot frequent parsing issues and layout optimization.
How do I write mermaid code correctly for different diagram types?
Mermaid Syntax teaches you the language rules and syntax for each of the 23 diagram types. Start by learning the basic structure for your diagram type—flowcharts use nodes and arrows, sequence diagrams use actors and messages, class diagrams use class definitions. Mermaid Syntax includes examples and patterns for each type so you can reference the correct syntax and apply it to your own code without errors.
Where can I find mermaid flowchart tutorial and examples?
Mermaid Syntax provides examples and patterns for flowcharts alongside syntax rules for all diagram types. You'll find flowchart examples showing node syntax, arrow connections, and common patterns. The skill also covers troubleshooting guidance for frequent parsing issues so you can debug your flowchart code and understand why syntax errors occur.
What does Mermaid Syntax include for configuration and theming?
Mermaid Syntax covers configuration and theming options to customize your diagrams beyond basic syntax. Learn how to apply themes, adjust layout settings, and configure diagram-specific options. The skill includes layout optimization tips for C4 diagrams and guidance on common configuration mistakes to help you create polished, well-formatted diagrams.
How can Mermaid Syntax help me troubleshoot diagram errors?
Mermaid Syntax includes troubleshooting guidance for frequent parsing issues and common syntax errors. When your diagram fails to render, use this skill to identify which syntax rule you may have violated, reference the correct pattern, and fix your code. The comprehensive syntax reference helps you understand language rules so you can write correct mermaid code the first time.
What mermaid diagram types are covered in this syntax reference?
Mermaid Syntax covers all 23 Mermaid diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, and C4 diagrams. Each diagram type has dedicated syntax rules, examples, and patterns. Reference this skill to find the specific syntax for whichever diagram type you're working with.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn mermaid diagram syntax and language rules”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
PlantUML Syntax is a reference skill covering diagram creation across nine types, with deep focus on C4-PlantUML for architecture work. It documents element and relationship syntax, layout constraints, and common rendering gotchas to help you build diagrams correctly.
Mermaid Diagrams converts text-based syntax into visual diagrams—flowcharts, sequence charts, ER models, class diagrams, Gantt timelines, and more. Embed diagrams directly in Markdown files and documentation. Perfect for system architecture, data modeling, and project planning without leaving your editor.
Create and validate Mermaid diagrams across multiple types—flowcharts for processes, sequence diagrams for system interactions, class and state diagrams for object models and lifecycles, ER diagrams for data relationships, and other specialized formats like Gantt charts. The skill preserves editable source while optionally rendering static SVG assets when needed for documents or slides.
This skill provides instant answers to common questions about CCS G-Cloud framework submissions, including character limits for service fields, lot structures, and declaration requirements. It covers the ~258 service questions and ~57 declaration questions suppliers must answer on the Digital Marketplace.
A prerequisite skill that prepares your diagram requests for Figma's generate_diagram tool. It routes you to type-specific guidance, enforces universal Mermaid constraints, and tells you when to use a different approach or edit in Figma instead. Load it before every diagram call to avoid preventable failures.
Mermaidjs V11 lets you create technical diagrams from declarative text syntax, rendering to SVG, PNG, or PDF. It covers flowcharts, sequence diagrams, class diagrams, state machines, ER diagrams, Gantt charts, and more—ideal for documentation, architecture planning, and system visualization. Use it inline in markdown, via CLI, or embedded in JavaScript applications with theme and configuration support.
More skills mermaid-diagramming (MIT) · mermaid-graph-writer (MIT)