What diagram types does this skill support?

It supports 23 different types, including flowcharts, sequence diagrams, class diagrams, ER diagrams, C4 models, Gantt charts, mindmaps, and state diagrams.

How does it improve C4 architecture diagrams?

It provides 'C4 Layout Science' guidance which includes research-backed rules for declaration ordering, edge crossing targets, and standardized color schemes.

Does it include styling and theming options?

Yes, the skill provides detailed references for configuration, theming directives, and layout settings to customize the look and feel of your diagrams.

Can this skill help fix Mermaid rendering errors?

Yes, it includes a specialized reference for common syntax 'gotchas' to help resolve issues like unescaped parentheses, invalid HTML in labels, and reserved keyword conflicts.

Mermaid Diagram Syntax Reference

Name: Mermaid Diagram Syntax Reference
Author: tractorjuice

bytractorjuice

•

159

•

Learning & Documentation

Provides comprehensive syntax guidance and troubleshooting for over 20 Mermaid diagram types including Flowcharts, Sequence diagrams, and C4 models.

This skill serves as an exhaustive reference for Mermaid.js syntax, enabling Claude to assist with the creation, styling, and debugging of 23 different diagram types. It bridges the gap between raw documentation and practical implementation by providing specific guidance for complex layouts like C4 models, ER diagrams, and Gantt charts. Whether you are troubleshooting rendering errors, looking for node styling tips, or applying research-backed layout science to architectural diagrams, this skill ensures accuracy and visual clarity in technical documentation and enterprise architecture governance.

Key Features

01159 GitHub stars

02Comprehensive syntax support for 23 diagram types including Flowchart, Sequence, and ER diagrams

03Specialized C4 layout science for optimized, research-backed architectural visualizations

04Built-in troubleshooting for common syntax 'gotchas' like reserved keywords and label formatting

05Detailed theming and configuration guidance for custom diagram styling and math notation

06Direct integration with ArcKit governance standards for enterprise-grade documentation

Use Cases

01Troubleshooting Mermaid rendering errors and syntax conflicts during diagram generation

02Learning the specific syntax and styling options for advanced diagram types like Sankey or C4

03Applying optimized layout principles to complex architecture diagrams to reduce edge crossing and improve readability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tractorjuice/arc-kit mermaid-syntax

For use in Claude.ai and ChatGPT

Key Features

01159 GitHub stars

02Comprehensive syntax support for 23 diagram types including Flowchart, Sequence, and ER diagrams

03Specialized C4 layout science for optimized, research-backed architectural visualizations

04Built-in troubleshooting for common syntax 'gotchas' like reserved keywords and label formatting

05Detailed theming and configuration guidance for custom diagram styling and math notation

06Direct integration with ArcKit governance standards for enterprise-grade documentation

Use Cases

01Troubleshooting Mermaid rendering errors and syntax conflicts during diagram generation

02Learning the specific syntax and styling options for advanced diagram types like Sankey or C4

03Applying optimized layout principles to complex architecture diagrams to reduce edge crossing and improve readability