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

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

  •  
  •   lipengxs · 2 days ago · 1669 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 更深度可视化?
    - 工具站这种形态,你会希望更偏“编辑器”,还是更偏“格式转换集合”?

    欢迎拍砖,我会继续迭代。
    11 replies    2026-06-08 11:49:27 +08:00
    7gugu
        1
    7gugu  
       2 days ago
    针对 mermaid ,我始终安利官方的这个在线编辑器: https://mermaid.live/
    lipengxs
        2
    lipengxs  
    OP
       2 days ago
    mermaid 生成的还比较少,它只能生成一些简单的,大部分都是使用 plantuml 生成,模型生成都不提供预览,要么使用 gitlab 上的预览,要么使用 plantuml server
    rbe
        3
    rbe  
       2 days 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
       2 days ago
    @rbe 非常有用,我本地 mac 安装的 plantuml 会失败,后面用的 plantuml server 配置 url 就能渲染,这里生成的文档放钉钉文档,钉钉的版本有点落后,经常渲染失败
    l84
        5
    l84  
       2 days ago
    draw.io 其实是最生产可用的,因为人工编辑可靠性高。问题是大部分 LLM one shot 的几乎不太能用,Gemini Deepseek qwen 都试过。就 CLAUDE 和 gpt 比较能用
    beginor
        6
    beginor  
       2 days ago via Android
    lipengxs
        7
    lipengxs  
    OP
       2 days ago
    @beginor 非常感谢,我试试
    maladaxia
        8
    maladaxia  
       1 day ago
    @7gugu 你这个跟 https://modern-mermaid.live/ 比如何?
    7gugu
        9
    7gugu  
       1 day ago
    @maladaxia 没用过这个,之前一直都是用的官方提供的,我感觉已经很够用了。基本的工作流就是,AI 帮我生成一版,然后我告诉 AI 哪些部分要裁剪掉,AI 再改一下就能用了。
    wwfalcon
        10
    wwfalcon  
       1 day ago via iPhone
    不是有这个吗 https://kroki.io/
    Kroki provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, Symbolator, TikZ, UMLet, Vega, Vega-Lite, WaveDrom, WireViz... and more to come!
    wwfalcon
        11
    wwfalcon  
       1 day ago via iPhone
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5496 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 140ms · UTC 09:00 · PVG 17:00 · LAX 02:00 · JFK 05:00
    ♥ Do have faith in what you're doing.