Agent skill · design visual · aiskillstore
mermaid-flowchart
Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.
Why this skill is useful
Provides specific syntax and examples for creating flowcharts using Mermaid that the AI wouldn't reliably generate on its own.
What it needs
About 12k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Flowcharts - Basic Syntax Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs. A node (default) A node with text It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The one previously defined will be used when rendering the box. Unicode text Use " to enclose the unicode text. Markdown formatting Use double quotes and backticks "\ text \" to enclose the markdown text. Direction This statement declares the direction of the Flowchart. This declares the flowchart is oriented from top to bottom (TD or TB). This declares the flowchart is oriented from left to right (LR). Possible FlowChart orientations are: TB - Top to bottom TD - Top-down/ same as top to bottom BT - Bottom to top RL - Right to left LR - Left to right Node shapes A node with round edges A stadium-shaped node A node in a subroutine shape A node in a cylindrical shape A node in the form of a circle A node in an asymmetric shape Currently only the shape above is possible and not its mirror. This might change with future releases. A node (rhombus) A hexagon node Parallelogram Parallelogram alt Trapezoid Trapezoid alt Double circle Expanded Node Shapes in Mermaid Flowcharts (v11.3.0+) Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning. New Syntax for Shape Definition Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/mermaid-flowchart