最近写 README、技术方案、接口文档和运维说明时，我越来越常让 AI 生成各类图表和配置文本：
- Mermaid 流程图、时序图、ER 图
- PlantUML 时序图、组件图、类图
- OpenAPI 接口调用流程
- SQL ER 图
- Docker Compose / Kubernetes / Terraform 架构关系
- Grafana dashboard JSON
- draw.io / diagrams.net 可编辑图
大模型生成初稿确实很快，但有一个步骤一直很烦：它通常只给代码，不帮你确认能不能渲染。很多时候复制到文档里才发现 Mermaid 语法报错，或者 PlantUML 图看起来不对，还要再找工具预览、修语法、导出图片。
广告
举个实际一点的输入，AI 可能会给你这种架构图代码：
flowchart TD
Browser --> CDN
CDN --> Web
Web --> API
API --> Redis
API --> PostgreSQL
API --> Queue
Queue --> Worker
Worker --> ObjectStorage
如果是接口文档，也可能是 OpenAPI 片段：
paths:
/login:
post:
summary: User login
responses:
"200":
description: Login success
"401":
description: Invalid credentials
"429":
description: Too many attempts
这些内容不是不能直接贴到文章里，而是发布前最好确认 「它真的能渲染、图意没有跑偏、导出的图片足够清晰」。
所以我做了一个在线工具站 DiagramPreview：
https://diagrampreview.com
它想解决的是 AI 输出和正式文档之间的这一段：
- 让 AI 或自己先生成图表/配置文本。
- 粘贴到 DiagramPreview 里在线预览。
- 如果语法有问题，修复或继续让 AI 改。
- 导出 SVG、PNG、PDF，或者下载
.drawio、.json、.yaml等文件，放进 README、技术方案、PRD 或博客。
先看几个实际页面效果：
目前工具按场景分成几类：
- AI：AI Diagram Generator、AI Draw.io、Text to Mermaid、Mermaid AI Fixer、Architecture Diagram
- 预览：Mermaid、PlantUML、Markdown、Graphviz、D2、Sequence、Mind Map
- Draw.io：PlantUML to Draw.io、Mermaid to Draw.io、Draw.io to SVG
- DevOps：Grafana Dashboard、Prometheus Alert、Docker Compose、Kubernetes、Terraform、GitHub Actions、Dockerfile、Helm、Nginx、OpenTelemetry
- 数据：SQL ER、JSON Schema、JSON、YAML、XML、CSV、GraphQL、Protobuf、AsyncAPI、DBML、Prisma
- 代码：OpenAPI Sequence、package.json Dependencies、Regex Railroad
如果是 DevOps / 监控类文档，也可以用 Grafana Dashboard Generator 生成 JSON 后继续编辑：
我自己的使用场景主要是：
- 写 README、技术方案、PRD、接口文档前先验证图表能否渲染。
- 用 AI 生成第一版 Mermaid / PlantUML / draw.io，再在浏览器里确认。
- 把 OpenAPI、SQL、K8s、Docker Compose、Terraform 等工程文本快速转成更容易讨论的图。
- 生成 Grafana dashboard JSON 或 Prometheus alert rules，再拿去继续调整。
DiagramPreview 不是想替代 AI，而是补上 「AI 生成之后，正式文档之前」 的预览、校验和导出步骤。
使用方式：不需要登录，浏览器里直接使用。普通预览类工具主要在浏览器本地处理；AI 生成类工具会调用后端接口，所以不要把私有代码、密钥、内部架构细节直接丢进去。
如果你也经常写技术文档、架构说明、接口方案、运维监控文档，可以试一下。也欢迎反馈还应该补哪些格式，比如 DBML、Terraform 更深度可视化、Grafana Dashboard 模板等。
适合搜索的关键词：
- Mermaid 在线预览
- PlantUML 在线预览
- Mermaid 导出 SVG
- PlantUML 导出 PNG
- SQL ER 图在线生成
- OpenAPI 时序图
- AI 生成流程图预览
