在日常开发、架构设计、产品方案、技术汇报中，Mermaid 已经成为很多团队常用的图表描述语言。它用文本生成图表，在版本管理、协作记录方面的优势非常明显。但在实际使用过程中，传统 Mermaid 编辑器普遍存在两个问题：
- 编辑体验偏基础，缺乏现代 UI
- 图表主题有限，风格单一，不够美观
为了让 Mermaid 更好用，我做了一个新工具：Modern Mermaid。这是一个现代化的 Mermaid 可视化编辑器与预览器，可以让你快速生成更好看的流程图、思维导图、状态图、时序图等。
在线体验地址：modern-mermaid.live
下面介绍它的核心特点与设计思路。
为什么要做 Modern Mermaid
虽然 Mermaid 本身功能强大，但很多用户真正的需求是：
- 写完代码后希望快速看到更优雅的图表
- 不同主题用于不同场景，例如文档、博客、演示、海报
- 需要更方便的导出能力，如 PNG、JPG
- 希望整个编辑体验更顺滑、更现代
市面上虽然有一些 Mermaid 在线编辑器，但整体视觉和交互较为传统，很少能在设计感和输出质量上满足要求。
于是 Modern Mermaid 诞生了。
Modern Mermaid 的主要功能
1. 实时预览
输入 Mermaid 代码后可以立即看到渲染效果，不需要刷新页面。编辑区和预览区同步滚动，支持深色/浅色界面。
2. 多种高级主题
为了提升图表观感，我设计了几组全新的主题：
- Default（现代通用主题）
- Industrial（类终端风格，深色、等宽字体）
- Hand Drawn（手绘草图风格）
- Studio Ghibli（吉卜力风，自然柔和配色）
- Retro（复古科技风）
通过这些主题，可以快速生成适合不同风格的图表，用于技术文档、PPT、博客或产品设计说明。
3. 高质量导出
支持导出为：
- PNG（可选择透明背景）
- JPG（带主题背景）
生成的图像分辨率高，可以直接使用在展示文档或文章中。
4. 简洁现代的编辑体验
界面使用 React + Tailwind CSS 构建，整体风格偏现代工具类应用，重点是清晰、高效、无干扰。
- 更舒服的代码编辑器
- 响应式布局，可在不同屏幕上使用
- 快速切换主题
- 支持快捷键
技术架构与实现思路
作为一个长期做 Golang 后端和 ToB 工具的开发者，我希望这个项目在体验之外，也有一定技术上的可扩展性。
主要技术栈包括：
- React：组件化 UI，易于扩展
- Vite：快速开发构建
- Tailwind CSS：统一风格体系，实现多主题更方便
- Mermaid API：支持最新图表渲染
- html-to-image：用于图表截图生成 PNG/JPG
在主题系统上，我没有直接修改 Mermaid 的核心 SVG，而是采用对 SVG 层的细粒度样式覆盖。这种方式风险更低，同时比较容易维护多风格主题。
使用场景
1. 写技术文档
架构图、流程图、状态图都可以快速生成更美观的版本，提高文档整体质感。
2. 发布技术博客
对博主来说，可读性和美观非常关键，特别是图表主题的视觉一致性。
3. 产品或运营团队出图
一些产品流程、业务展示，也可以直接用 Mermaid 生成，再套上主题导出图片。
4. 团队内部设计沟通
结构清晰、可复现、可版本管理，便于团队协作。
后续计划
Modern Mermaid 仍在持续迭代，后续会加入：
- 自定义主题编辑器
- VS Code 插件
- 多图表模板
- 支持更多图类型（例如类图、ERD）
如果你有任何建议，也可以直接告诉我。
最后
如果你也在用 Mermaid，希望拥有更现代、更美观的体验，欢迎试试 Modern Mermaid。
我会持续维护这个工具，也欢迎提出反馈。
