GoForum🌐 V2EX

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

lipengxs · 2026-06-06 23:08 · 0 次点赞 · 3 条回复

大家好,最近我做了一个小工具 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 更深度可视化?
  • 工具站这种形态,你会希望更偏“编辑器”,还是更偏“格式转换集合”?

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

3 条回复
7gugu · 2026-06-06 23:28
#1

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

lipengxs · 2026-06-06 23:38
#2

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

rbe · 2026-06-06 23:58
#3

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

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

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

添加回复
你还需要 登录 后发表回复

登录后可发帖和回复

登录 注册
主题信息
作者: lipengxs
发布: 2026-06-06
点赞: 0
回复: 0