这个mermaid在线编辑器挺好用的

https://mermaid.js.org/

图表和绘图工具

基于JavaScript的绘图和图表工具，可将Markdown风格的文本定义呈现出来，以动态创建和修改图表。

另外目前主流的 Mermaid 在线编辑器 推荐及功能对比，可以快速选择适合的工具：

一、综合型编辑器（支持实时预览+协作）

Mermaid墨美图表

核心功能：实时预览、AI辅助生成代码（如GPT-4）、支持导出SVG/PNG/PDF，提供企业级私有部署。

特色：语法错误高亮显示，支持团队协作编辑。

链接：www.momeitubiao.com

Mermaid Live Editor

核心功能：即时渲染图表，支持主题切换（如暗黑/亮色），内置流程图、甘特图等模板。

特色：自动同步代码与预览，无需手动刷新。

链接：mermaid-plugin.tooltag.cn

中文Mermaid编辑器

核心功能：中文界面友好，支持流程图、状态图等，可导出图片或SVG。

特色：实时预览+Markdown风格语法。

链接：www.min2k.com

二、轻量级工具（快速渲染+导出）

Mermaid 在线编辑器（NodeJS版）

核心功能：极简界面，直接粘贴代码生成图表，支持基础导出。

适用场景：快速调试单张图表。

链接：mermaid-live.nodejs.cn

DeepSeek/ChatGPT配套工具

核心功能：专为AI生成的Mermaid代码优化，支持一键清理代码标记（如删除```mermaid）并渲染。

特色：内置技术架构图、甘特图等热门模板。

三、进阶功能工具

MermaidEditor（桌面端）

核心功能：语法高亮、代码补全，支持导出PNG/SVG，适合本地开发。

平台：macOS/Windows。

四、使用建议

协作需求 → 选择 Mermaid墨美图表 或 Mermaid Live Editor。

快速调试 → 使用 NodeJS版编辑器 或 DeepSeek配套工具。

中文用户 → 优先尝试 中文Mermaid编辑器。

所有工具均支持Mermaid标准语法（如流程图graph TD、时序图sequenceDiagram等）。