• 请不要在回答技术问题时复制粘贴 AI 生成的内容
lipengxs
V2EX  ›  程序员

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

  •  
  •   lipengxs · 23h 13m ago · 1043 views
    大家好,最近我做了一个小工具 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 replies    2026-06-07 18:18:49 +08:00
    7gugu
        1
    7gugu  
       22h 59m ago
    针对 mermaid ,我始终安利官方的这个在线编辑器: https://mermaid.live/
    lipengxs
        2
    lipengxs  
    OP
       22h 45m ago
    mermaid 生成的还比较少,它只能生成一些简单的,大部分都是使用 plantuml 生成,模型生成都不提供预览,要么使用 gitlab 上的预览,要么使用 plantuml server
    rbe
        3
    rbe  
       22h 28m ago
    我选择直接写一个 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
        4
    lipengxs  
    OP
       12h 28m ago
    @rbe 非常有用,我本地 mac 安装的 plantuml 会失败,后面用的 plantuml server 配置 url 就能渲染,这里生成的文档放钉钉文档,钉钉的版本有点落后,经常渲染失败
    l84
        5
    l84  
       10h 49m ago
    draw.io 其实是最生产可用的,因为人工编辑可靠性高。问题是大部分 LLM one shot 的几乎不太能用,Gemini Deepseek qwen 都试过。就 CLAUDE 和 gpt 比较能用
    beginor
        6
    beginor  
       9h 39m ago via Android
    lipengxs
        7
    lipengxs  
    OP
       7h 49m ago
    @beginor 非常感谢,我试试
    maladaxia
        8
    maladaxia  
       4h 3m ago
    @7gugu 你这个跟 https://modern-mermaid.live/ 比如何?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3068 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 14:22 · PVG 22:22 · LAX 07:22 · JFK 10:22
    ♥ Do have faith in what you're doing.