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

lipengxs 2026-06-06 23:08 1

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

欢迎拍砖,我会继续迭代。
最新回复 (8)
  • 7gugu 06-06 23:23
    1
    针对 mermaid ,我始终安利官方的这个在线编辑器: https://mermaid.live/
  • lipengxs 楼主 06-06 23:37
    2
    mermaid 生成的还比较少,它只能生成一些简单的,大部分都是使用 plantuml 生成,模型生成都不提供预览,要么使用 gitlab 上的预览,要么使用 plantuml server
  • rbe 06-06 23:54
    3
    我选择直接写一个 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 聊一段时间后问出来的,这是最简单的方式了,有时候一下子生成项目架构图好多张,自己贴太费劲了
  • lipengxs 楼主 06-07 09:54
    4
    @rbe 非常有用,我本地 mac 安装的 plantuml 会失败,后面用的 plantuml server 配置 url 就能渲染,这里生成的文档放钉钉文档,钉钉的版本有点落后,经常渲染失败
  • l84 06-07 11:33
    5
    draw.io 其实是最生产可用的,因为人工编辑可靠性高。问题是大部分 LLM one shot 的几乎不太能用,Gemini Deepseek qwen 都试过。就 CLAUDE 和 gpt 比较能用
  • beginor 06-07 12:43
    6
    你需要的是这个

    https://github.com/markdown-viewer/markdown-viewer-extension
  • lipengxs 楼主 06-07 14:33
    7
    @beginor 非常感谢,我试试
  • maladaxia 06-07 18:18
    8
    @7gugu 你这个跟 https://modern-mermaid.live/ 比如何?
* 帖子来源V2EX
返回