写 README/技术方案时被 Ai 生成的 PlantUml/Mermaid 折腾烦了，做了个 预览小工具

[lipengxs]

大家好，最近我做了一个小工具 DiagramPreview：

https://diagrampreview.com

起因是我最近写 README 、技术方案和接口文档时，经常让大模型生成 Mermaid 、PlantUML 、架构图、OpenAPI 流程、SQL ER 图之类的文本。

AI 生成初稿确实很快，但有个步骤一直很烦：它通常只给代码，不帮你确认能不能渲染。很多时候复制到文档里才发现 Mermaid 报错，或者 PlantUML 图看起来不对，还要再找工具预览、修语法、导出图片。

所以我把这个中间步骤做成了一个在线工具站：

- Mermaid / PlantUML / Graphviz / D2 / Markdown 预览
- AI Diagram Generator 、Text to Mermaid 、Mermaid AI Fixer
- OpenAPI to Sequence Diagram 、SQL to ER Diagram
- JSON / YAML / JSON Schema / XML / CSV 结构可视化
- Docker Compose 、Kubernetes Manifest 、package.json 依赖图
- SVG / PNG / PDF 导出
- 不需要登录，浏览器里直接用

普通预览类工具主要在浏览器里处理。AI 生成类工具会调用后端接口，所以不要把私有代码、密钥、内部架构细节直接丢进去。

我的主要使用场景是：

1. 让 AI 先生成图表代码。
2. 粘贴到 DiagramPreview 里看是否能渲染。
3. 如果语法坏了，修一下或让 AI 修复。
4. 导出 SVG/PNG 放到 README 、PRD 、技术方案或周报里。

目前还比较早期，想听听 V2EX 上大家的建议：

- 你们写技术文档时最常用 Mermaid 、PlantUML 还是 draw.io ？
- 还有哪些格式值得补，比如 DBML 、Terraform 、Protobuf 、Grafana Dashboard 、Prometheus Alert 、Swagger 更深度可视化？
- 工具站这种形态，你会希望更偏“编辑器”，还是更偏“格式转换集合”？

欢迎拍砖，我会继续迭代。

[7gugu]

针对 mermaid ，我始终安利官方的这个在线编辑器： https://mermaid.live/

[lipengxs]

mermaid 生成的还比较少，它只能生成一些简单的，大部分都是使用 plantuml 生成，模型生成都不提供预览，要么使用 gitlab 上的预览，要么使用 plantuml server

[rbe]

我选择直接写一个 skill ，自己试过了，效果还行，大致思路是：

1. 检查本地 mmdc 工具，如果没有就 npx 装一个。mmdc 是 mermaidjs 提供的 cli 工具, npm 包是 @mermaid-js/mermaid-cli
2. 用 mmdc 生成一个 svg 图放到 /tmp ，open/start 打开看
2. 如果装不了，就降级到使用 mermaid.ink 的 API （第三方 api 要注意下隐私）
3. 再不行，降级到纯文本自己处理。实际应该不会，配好过一次环境就都成功率很高了

PlantUML 应该也有类似的工具，上面这套流程也是和 Claude 聊一段时间后问出来的，这是最简单的方式了，有时候一下子生成项目架构图好多张，自己贴太费劲了