Diagram / EditorSelected

MermaidFlow

Free Online Mermaid Diagram Editor

在线 Mermaid 图表编辑器:语法高亮、实时预览与导出能力,让“文本即图表”更顺手。

  • Mermaid
  • Diagram
  • Editor
  • Export
SelectedWeb AppLiveWebCreated 2025-06-24Updated 2026-04-04
MermaidFlow cover

Open the product

Start with the live surface

MermaidFlow cover

Live preview

部分站点可能因为安全策略无法被嵌入;遇到空白时请用上面的 Open live。

Access

For this type of entry, the strongest content is the live product itself. The notes below are there to frame what matters, not to replace the real experience.

Visual history

Latest state first, previous interface states preserved underneath

This timeline keeps a readable visual memory of the surface, so the newest cover can stay on the project card without erasing what came before.

Project notes

What to know before opening the live product

01

Background

为什么做

流程图往往卡在“画图工具太重”与“Markdown 太轻”之间;Mermaid 的优势是可维护,但编辑体验常常不够顺滑。

02

Scenario

应用场景

  • 写文档与技术方案:在 README / Spec 中维护图表。
  • 产品/流程梳理:快速迭代流程版本,不被拖拽 UI 绑架。
  • 学习与分享:以链接/导出图像的方式传播。

03

Delivery

实现了什么

  • 编辑区 + 预览区的实时联动。
  • 面向可写性的语法高亮与输入体验。
  • 导出能力:把图表带走,进入你的文档与汇报。

04

Design

设计要点

  • “输入/输出”一眼可见:把主要精力留给内容本身。
  • 低干扰 UI:工具存在感要低,但反馈要及时。
  • 默认可用:打开即写,不让用户先做配置。

05

Tech

技术实现

  • Mermaid 渲染与预览组件化,确保编辑与渲染解耦。
  • 以导出为核心的输出链路(SVG/PNG 等)。

Flow

The path from entry to completion

This version is best understood as a living product: entry points, feedback loops, and completion states matter as much as the surface design.

Write / Preview / Export

MermaidFlow flowWritePreviewExport