mermaid-js/mermaid-live-editor

【主题】

为 Mermaid 图表语法提供一个开箱即用的在线编辑、预览与分享环境，让图表创作像写 Markdown 一样简单。

【核心分点总结】

1. 实时双向同步：编辑 Mermaid 语法代码时，右侧图表即时渲染更新；点击图表元素亦可定位到对应代码行，实现所见即所得的编辑体验。

2. 零配置在线使用：无需安装任何软件或依赖，打开浏览器即可开始绘制流程图、序列图、甘特图等，大幅降低图表创作的入门门槛。

3. 一键分享协作：编辑器状态（包括代码和视图设置）可编码为 URL，通过链接即可将图表设计分享给他人，方便团队评审与协作。

4. 多格式导出：支持将图表导出为 SVG、PNG 等常见图片格式，方便嵌入文档、演示文稿或网页中。

【行动指南】

1. 当你需要快速绘制一张技术架构图、流程图或时序图，并希望直接分享给同事进行评审时，请直接访问 Mermaid Live Editor 网站，粘贴或编写代码即可开始。

2. 若你正在撰写技术文档（如 README、Wiki），希望内嵌动态可维护的图表，可先在此编辑器中调试好图表代码和样式，再将生成的代码或链接集成到你的文档中。

3. 作为开发者，你还可以将其作为学习和调试 Mermaid 语法的“沙盒”，实时观察语法变化对图表的影响，快速上手新图表类型。

【金句总述】

它把复杂的图表绘制，变成了在线上轻快敲击、即时生成并分享的创造过程。

【故事性收尾】

想象一下：过去，为了画一张架构图，你需要打开笨重的绘图软件，拖拽半天组件，调整半天对齐；现在，你只是在浏览器里写下几行清晰的文字描述，一张专业的图表便在右侧跃然眼前。当你想和同事讨论，只需复制浏览器地址栏的链接发过去，对方看到的，就是你正在创作的、实时的版本。那些卡在“画图”上的时间消失了，思路得以顺畅地流淌在文档与对话之间。