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

程图、架构图、时序图和数据结构说明。

比如让它生成:

  • Mermaid flowchart
  • PlantUML sequence diagram
  • OpenAPI 接口调用流程
  • SQL ER 图
  • Docker Compose 服务关系
  • Kubernetes manifest 摘要
  • package.json 依赖关系

问题是,大模型通常只给文本代码。它可以写 Mermaid,但不会稳定地帮你预览;它可以写 PlantUML,但你还要找地方渲染;它可以解释 OpenAPI 或 SQL,但你还是要手动整理成图。

于是我做了 DiagramPreview:

https://diagrampreview.com

下面是 Mermaid 预览和 AI Draw.io 生成页面的效果:

它想解决的是 AI 生成图表后的下一步:

  1. 粘贴 AI 生成的图表代码。
  2. 在线预览是否能渲染。
  3. 如果 Mermaid 语法有问题,可以修复。
  4. 生成 SVG/PNG/PDF,放进 README、技术方案、PRD 或博客。

这个工具站的定位不是替代 AI,而是补上 AI 输出和正式文档之间的"预览、校验、导出"环节。

如果是 DevOps / 监控类文档,也可以用 Grafana Dashboard Generator 生成 JSON 后继续编辑:

适合搜索关键词:

  • Mermaid 在线预览
  • PlantUML 在线预览
  • Mermaid 导出 SVG
  • PlantUML 导出 PNG
  • SQL ER 图在线生成
  • OpenAPI 时序图
  • AI 生成流程图预览
相关推荐
神奇霸王龙11 小时前
Cursor 3 + Claude Opus 4.8 屠榜:5 编程基座 IDE 卡位
ide·人工智能·ai·aigc·agent·ai编程·ai写作
格数致用11 小时前
用 MCP 让 AI 替你画图:Trae Work + drawio-mcp 完整搭建指南
ai·draw.io·mcp·traework·drawio-mcp
susu108301891114 小时前
codex配置mcp
ai
Meta3915 小时前
WSL使用Open Code集成VS Code
ai
深念Y16 小时前
约束工程:如何让 AI 没法跑偏
人工智能·ai·软件工程·codex·opencode·ccsiwtch
腾视科技-AIoT16 小时前
腾视科技重磅推出TensorAI智能体平台,开启智能助手新体验
大数据·人工智能·科技·ai·ai大模型·ainas·腾视科技
腾视科技-AIoT17 小时前
腾视科技AIBOX双版本重磅发布!本地安全与全球适配,解锁视频智能新可能
大数据·人工智能·科技·ai·物理ai·ainas·腾视科技
小七-七牛开发者18 小时前
Agent 小知识 | Skill 的设计与生命周期:从工具接口到能力模块
ai·大模型·agent·token·工作流·claudecode·ai coding
阿菜ACai18 小时前
Agent Harness 是怎样和大模型交流的?
ai