ToolCraft
HomeAI ToolsDeveloper ToolsUnit ConverterImage Tools
ToolCraft

© 2026 ToolCraft. All rights reserved.

Privacy PolicyTerms of Service
DMCA.com Protection Status
HomeData & ChartsMermaid Diagram Editor

Data & Charts

CSV to JSON ConverterJSON to CSV ConverterStatistics CalculatorChart GeneratorJSON ViewerCSV ViewerTSV / CSV ConverterJSONL / JSON ConverterCSV / XML ConverterMarkdown ↔ Excel ConverterMermaid Diagram Editor

Mermaid Diagram Editor

Write Mermaid syntax, get a live SVG diagram. Flowchart, sequence, class, ER, Gantt, pie, state, journey — all client-side.

Ctrl+Shift+CCopy output
Examples:

Type Mermaid code to render a diagram here.

View all Data & Charts

View all
100% offline

CSV to JSON Converter

Convert CSV data to JSON format with customizable options

Data & Charts
100% offline

JSON to CSV Converter

Convert JSON arrays to CSV format with customizable delimiters

Data & Charts
100% offline

Statistics Calculator

Calculate mean, median, mode, standard deviation and more

Data & Charts
100% offline

Chart Generator

Create bar, line, pie and doughnut charts from your data

Data & Charts

What is the Mermaid Diagram Editor?

Mermaid is a text-based diagramming language used in GitHub READMEs, Notion docs, GitLab issues, and dozens of static-site generators. Write a few lines like "flowchart TD\n A --> B" and Mermaid renders a proper SVG diagram. The Mermaid Diagram Editor brings that workflow into your browser — paste or type Mermaid code on the left, get a live SVG on the right, then download as SVG (vector, perfect for documentation) or PNG (2x scale, ready for slides). Eight diagram types are supported: flowchart, sequence, class, state, ER, Gantt, pie, and journey. The Mermaid runtime (~500 KB) is loaded only when you open this page, never from the worker, and everything renders client-side so private architecture diagrams never leave your browser.

Diagram quick reference

flowchart TD → top-down flowchart sequenceDiagram → request/response sequence classDiagram → UML class with inheritance stateDiagram-v2 → state machine erDiagram → entity-relationship (ER) gantt → project timeline pie → pie chart journey → user journey map

FAQ