Lean Docs

Mermaid.js GitGraph Diagram Syntax Guide

A GitGraph diagram is a specialized visualization component used by developers, DevOps teams, and technical writers to clearly communicate Git branching strategies, release management, and development workflows. Integrated natively into Mermaid.js, the gitGraph engine utilizes a declarative, sequential timeline model….

Mermaid.js C4 Diagram Syntax & Architecture Guide

A C4 Diagram is a standardized architectural visualization method designed to model software systems at multiple levels of structural abstraction. Built natively into Mermaid.js, the c4 engine follows the four core tiers of the C4 model: Context (the macro ecosystem),…

Mermaid.js Requirement Diagram Syntax & Traceability Guide

A Requirement Diagram is a specialized engineering visualization tool used by systems architects, product managers, and software engineers to map out technical specifications, system constraints, and verification tests. Built on the SysML (Systems Modeling Language) standard, the native requirementDiagram engine…

Mermaid.js Block Diagram Syntax & Grid Layout Guide

A Block Diagram is a structured layout engine used to represent complex software architectures, hardware platforms, or organizational models. Introduced natively in Mermaid.js, the block engine treats the layout canvas as an absolute mathematical grid matrix. This provides precise control…

Mermaid.js Packet Diagram Syntax & Layout Guide

A Packet diagram is a specialized visualization component used by network engineers, security analysts, and systems developers to map out the exact binary structure of network protocols, memory allocations, or custom hardware packet headers. Introduced natively in Mermaid.js, this tool…

Mermaid.js Architecture Diagram Syntax & Layout Guide

An Architecture diagram provides a structured blueprint used by systems architects and DevOps teams to visualize infrastructure setups, cloud microservices, and structural layout configurations. Built on the architecture-beta engine, this text-based tool replaces manual dragging utilities by auto-arranging structural service…

Mermaid.js Event Modeling Syntax & Swimlane Guide

Event Modeling (EM) is a strategic methodology used to design and describe information systems by mapping how data shifts, translates, and changes over a linear timeline. By deliberately omitting transient system mechanics, an Event Modeling diagram concentrates strictly on the…

Mermaid.js Wardley Map Syntax & Strategy Guide

A Wardley Map is a powerful framework used for business strategy to visualize value chains and map out component evolution. Introduced as a native feature in Mermaid v11.14.0+, the wardley-beta engine allows strategy teams, architects, and product managers to map…

Mermaid.js Kanban Board Syntax & Workflow Guide

A Kanban board is a visual workflow management tool used to track tasks or work items across different processing stages (such as Backlog, In Progress, and Completed). Introduced as a native feature in Mermaid.js, this text-based approach allows development teams…

Mermaid.js XY Chart Syntax & Configuration Guide

An XY Chart is a comprehensive data visualization component used to render both line charts and bar charts on a standard two-dimensional grid coordinate layout. Introduced to replace and consolidate older standalone charting schemas, the xychart-beta rendering engine dynamically processes…

Scroll to Top