layout-mermaid-diagram

What problem does it solve?

Mermaid diagrams often suffer from node overlap and awkward spacing, making diagrams hard to read and explain. This Skill provides layout techniques to precisely control rendering without manual dragging.

Core Features & Use Cases

• Invisible Anchor (~~~) keeps nodes on the same rank without drawing a line.
• Arrow Length Hack (----) increases spacing along the main spine.
• Node Definition Ordering to establish priority in top-to-bottom rendering.
• Subgraph Force Fields to group related nodes and prevent external lines from weaving through them.
• Multi-Node Connections to align several nodes on the same level.

Typical use cases include documentation diagrams, planning workflows, and architecture visuals where consistent spacing improves comprehension.

Quick Start

Create a Mermaid diagram that uses invisible anchors and arrow-length hacks to keep nodes aligned and evenly spaced.