Lean Docs

Mermaid.js Sankey Diagram Syntax & Configuration Guide

Sankey diagrams are highly effective visualization tools used to depict the directional flow of quantities between distinct nodes within a system. By scaling the physical width of the connecting links proportionally to the numeric flow volume, they allow engineers, analysts,…

Mermaid.js Treemap Diagram Syntax & Layout Guide

A Treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches. The size of each rectangle is perfectly proportional to…

Mermaid.js Ishikawa Diagram Syntax & Layout Guide

An Ishikawa diagram—commonly referred to as a fishbone or cause-and-effect diagram—is a structural tool used during root cause analysis to map out contributing factors behind a specific problem. Introduced natively in Mermaid v11.13.0, this text-to-diagram framework formats structural cause branches…

Mermaid.js Pie Chart Syntax & Data Guide

Pie charts are circular statistical graphics used to display numerical proportions by dividing data into slices. In Mermaid.js, you can build clean, responsive data breakdowns automatically without messing with complex charting libraries or vector design tools. The rendering engine handles…

Mermaid.js Venn Diagram Syntax & Layout Guide

Venn diagrams show logical relationships between different sets or groups of data using overlapping circles. This text-based approach allows you to quickly illustrate concepts that live at the intersection of multiple categories without messing with manual graphic design tools. Basic…

Mermaid.js User Journey Syntax Guide

A User Journey diagram describes the steps a user takes to achieve a specific goal within your application. Unlike systems-focused flowcharts or sequence diagrams, user journeys focus on human actions, workflow stages, and user satisfaction tracking over time. Basic Syntax…

Scroll to Top