skills.rest
cliveportman
cliveportmanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mermaid

Standardize Mermaid diagram node shapes, IDs, colors, and layout for design specs.

1|Updated Oct 13, 2024
Search Tags:#mermaid#diagrams#flowcharts#color-schemes#design-specs#subgraphs#node-shapes
One-click install
npx skills add https://github.com/cliveportman/way-of-the-goat --skill mermaid-cliveportman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/cliveportman/way-of-the-goat/tree/main/.claude/skills/mermaid
Command: npx skills add https://github.com/cliveportman/way-of-the-goat --skill mermaid-cliveportman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams in design specs often vary, making it hard to compare flows and communicate intent. This skill defines a standard set of conventions for node shapes, IDs, color schemes, and layout to ensure consistency across teams.

Core Features & Use Cases

  • Node shapes and styles: Standardized shapes for entry points, actions, decisions, outputs, API calls, and sub-flows.
  • Node IDs and labeling: Descriptive camelCase IDs and self-documenting labels to avoid ambiguity.
  • Decision edges and annotations: Clear, labeled edges and support for explanatory annotations without disrupting flow.
  • Colour scheme and styling: Unified classDef styles for default, decisions, endpoints, and annotations to maintain visual consistency.
  • Subgraphs and organization: Group related steps to reflect screens or phases in a flow.

Quick Start

Create a Mermaid flow diagram by writing a flowchart LR block in a Markdown file with labeled nodes and edges.

Frequently Asked Questions about mermaid

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

FAQPage Schema
How do I standardize Mermaid diagram styling across multiple design specs?▼

To standardize Mermaid diagram styling, you apply unified conventions for node shapes, descriptive camelCase IDs, color schemes, and subgraph organization, ensuring visual consistency across design documentation and teams.

What are the best conventions for node shapes in Mermaid flowcharts?▼

Best conventions for Mermaid flowchart node shapes assign specific standardized shapes to entry points, actions, decisions, outputs, API calls, and sub-flows, ensuring self-documenting diagrams and avoiding ambiguity across projects.

How do I organize complex flows in Mermaid using subgraphs?▼

To organize complex flows in Mermaid, use subgraphs to group related steps, reflecting distinct screens or phases, while applying unified classDef styles to maintain visual consistency for decisions and annotations.

Can I add explanatory annotations to Mermaid flowcharts without disrupting the flow?▼

Yes, you can add explanatory annotations to Mermaid flowcharts using labeled decision edges and specific classDef styles, ensuring clarity without disrupting the main visual flow of the diagram.

Why do Mermaid diagrams look inconsistent across different design documentation?▼

Mermaid diagrams look inconsistent due to varying node shapes, IDs, and color schemes. Applying a standardized reference for layout and classDef styles ensures consistent visuals and clear communication across design specs.

Does this approach to Mermaid diagrams work for both decisions and sub-flows?▼

Yes, this approach works for decisions and sub-flows by encapsulating conventions for node shapes, labeled edges, and color schemes, applying consistent visual standards across all flows within design documentation.

Related Skills

Explore More Design & Creative Skills→
thapaliyabikendrathapaliyabikendra
24

mermaid-diagram-patterns

Generate Mermaid diagrams from natural language descriptions.

Community
Basic
vjcspyvjcspy

mermaid-diagram

Generate Mermaid v11+ diagrams from textual descriptions of flows and architectures.

Community
Intermediate
sequenziasequenzia
2

technical-diagrams

Create Mermaid diagrams with standardized syntax and styling rules.

Community
Intermediate
SayBGMSayBGM

moai-library-mermaid

Generate flowcharts, sequence diagrams, and architecture diagrams using Mermaid syntax.

Community
Advanced