Diagram Types

24 diagram types. Full IDE support.

Mermaid Studio supports every native Mermaid.js diagram type with syntax highlighting, validation, and live preview. Most types also include code completion, refactoring, and advanced features.

Process & Flow

Visualize workflows, processes, and system interactions

Flowchart

Process flows, decision trees, and workflows

Comprehensive

Sequence

Interactions between participants over time

Comprehensive

State

State machines and transitions

Comprehensive

User Journey

Customer experiences and user interactions

Enhanced

Architecture & Structure

Document system architecture and software design

C4

Software architecture using the C4 model

Comprehensive

Class

Object-oriented designs and UML relationships

Comprehensive

Entity Relationship

Database schemas and entity relationships

Comprehensive

Architecture

System architecture with cloud-style icons

Comprehensive

Block

Block-based architectural diagrams

Comprehensive

Requirement

System requirements and traceability

Comprehensive

Planning & Organization

Project planning, schedules, and idea organization

Gantt

Project schedules with tasks and dependencies

Comprehensive

Kanban

Task boards and workflow stages

Enhanced

Mindmap

Hierarchical idea organization

Comprehensive

Timeline

Chronological events and milestones

Basic

Treemap

Hierarchical data as nested rectangles

Comprehensive

Data & Analytics

Charts and data visualization

XY Chart

Bar charts and line charts

Enhanced

Pie

Proportional data visualization

Enhanced

Quadrant

Priority matrices and 2x2 analysis

Enhanced

Radar

Multivariate data comparison

Enhanced

Sankey

Flow quantities with proportional arrows

Enhanced

Version Control & Technical

Git workflows and technical diagrams

Git Graph

Version control history and branching

Comprehensive

Packet

Network packet structures

Basic

Analysis & Quality

Root cause analysis and set relationships

Ishikawa

Fishbone cause-and-effect diagrams

Comprehensive

Venn

Set relationships and intersections

Enhanced

Support Levels

Comprehensive

Full IDE support including completion, refactoring, Code Vision, and advanced features

Enhanced

Completion, refactoring, and standard IDE features

Basic

Syntax highlighting, validation, and live preview

File Extensions

Mermaid Studio recognizes .mmd and .mermaid files. Diagrams also work in Markdown code blocks with the mermaid language identifier.

Note: ZenUML is not supported as it’s a third-party integration, not a native Mermaid diagram type.