Mermaid Diagram Rendering - Interactive GitHub-Style Diagrams

#Introduction

This post demonstrates the new Mermaid diagram rendering. Any fenced code block with the mermaid language is now rendered as an interactive diagram instead of highlighted code.

Every diagram ships with the same controls as GitHub's markdown renderer:

• Zoom in / zoom out buttons and keyboard shortcuts (+ / -)
• Reset to fit the container (0)
• Pan by dragging the diagram, or with the arrow keys in fullscreen
• Fullscreen modal via the expand button (Esc to close)

#Flowchart

A basic flowchart with a decision node:

#Sequence Diagram

A typical API request flow:

#Class Diagram

A small inheritance hierarchy:

#State Diagram

A service lifecycle:

#Git Graph

Branching and merging:

#Mind Map

A simple project overview:

#Regular Code Still Works

A mermaid block above does not affect the normal highlighting pipeline:

const double = (x) => x * 2
 
console.log(double(21))