工具目录
全部图表工具
按格式、工作流和图表类型浏览 DiagramPreview 工具。
可用工具
77Mermaid 在线预览
实时预览 Mermaid 流程图、时序图、类图和 ER 图，并导出 SVG/PNG。
AI 图表生成器
用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。
文本转 Mermaid
把产品说明、事故记录、架构文本和需求草稿转换成可编辑 Mermaid 图表。
Mermaid AI 修复器
用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。
架构图生成器
用 AI 从产品或系统说明生成 Mermaid 架构图。
PlantUML 在线预览
在线预览 PlantUML 时序图、类图、用例图和活动图。
AI PlantUML 生成器
通过 DeepSeek 从自然语言生成 PlantUML。
AI Draw.io 生成器
用 AI 生成可编辑 diagrams.net / draw.io XML，用于架构图、CI/CD 和数据流草稿。
Markdown Preview
预览 Markdown，并渲染 Mermaid fenced code block。
Grafana 看板生成器
为 Prometheus、Loki、Node Exporter、API、Kubernetes 监控生成 Grafana dashboard JSON。
SVG 代码预览编辑器
粘贴 SVG 标记或 data URI，安全预览并导出清理后的 SVG。
Prometheus 告警规则生成器
为 API、基础设施、Kubernetes、数据库、队列生成 Prometheus alert rules YAML。
可观测性套件生成器
可观测性套件生成器：用于开发者文档的在线预览、校验和导出工具。
Open Graph 预览调试器
预览 og:title、og:description、og:image、Twitter Card 和社交分享卡片。
Postman Collection 转时序图
把 Postman Collection JSON 转成接口调用时序图，检查请求顺序和文档流程。
robots.txt 测试器
针对目标 URL 测试 robots.txt 的 Allow 与 Disallow 规则。
HAR 文件转时序图
把浏览器 HAR 请求转换成时序图，用于 API 调试、性能排查和事故复盘。
HAR 文件瀑布流查看器
预览 HAR 请求时间线、状态码、最慢请求和主机分布。
Sitemap XML 查看器
预览 sitemap XML 的 URL、索引、重复项、lastmod 和 hreflang。
Sequence Diagram Preview
使用 Mermaid sequenceDiagram 语法预览时序图。
API 错误流程图
把 API 状态码、失败条件、重试规则和恢复动作整理成清晰的错误流程图。
OpenAPI 转时序图
把 OpenAPI paths 转成 Mermaid 时序图，用于接口文档、后端评审和运行时对比。
PlantUML 转 Draw.io
把 PlantUML 草稿转换成可编辑 draw.io XML，方便在 diagrams.net 中继续调整。
SQL 转 ER 图
从 CREATE TABLE SQL 生成 ER 图，检查表、主键、外键和关系。
package.json 依赖图
可视化 package.json 中的 dependencies、devDependencies、peerDependencies 和 optionalDependencies。
Docker Compose 架构图
把 docker-compose.yml 中的服务、depends_on、网络、卷和端口转换成架构图。
CloudFormation 模板架构图
CloudFormation 模板架构图：把 AWS CloudFormation 模板转成资源关系图，适合云架构和 IaC 文档。
Graphviz DOT Preview
在浏览器中把 DOT 图渲染成 SVG。
Mermaid 转 Draw.io
将常见 Mermaid 流程图和时序图转换为可编辑 draw.io XML，并提供 SVG 预览。
D2 在线预览
在线预览 D2 架构图和服务关系图，适合文本优先的架构文档。
Kubernetes Manifest 可视化
把 Kubernetes YAML 可视化为资源树，检查 Deployment、Service、Ingress、label 和 namespace。
网页转 Markdown
将网页 URL 或粘贴的 HTML 转换为干净的 Markdown，适合文档、笔记、AI 提示词和内容迁移。
Terraform 架构图
将 Terraform resource 块和引用关系可视化为架构图。
Kubernetes 服务拓扑图
Kubernetes 服务拓扑图：用于开发者文档的在线预览、校验和导出工具。
HTML 沙箱预览
在禁用脚本的沙箱中预览 HTML 组件、邮件片段和落地页区块。
Regex 铁路图
把正则表达式转换成简单的铁路图，适合写文档和代码评审。
CSS 渐变预览
预览 CSS linear、radial、conic 和 repeating 渐变，并提取色标。
GitHub Actions 工作流图
将 GitHub Actions YAML 中的 jobs、needs、steps 转换为可读工作流图。
JSON Diff Viewer
对比两个 JSON payload，查看新增、删除和变更路径。
CI/CD 流水线生成器
CI/CD 流水线生成器：用于开发者文档的在线预览、校验和导出工具。
Base64 图片预览
预览 Base64 图片字符串和 data URL，并分析 MIME 类型和体积。
Mind Map Preview
把 Markdown 标题或缩进文本接入思维导图工作区。
JSON Schema 可视化
查看 JSON Schema 属性、类型、必填字段、枚举、数组 item 和 oneOf/anyOf 结构。
JSON Schema 表单预览
把 JSON Schema 的属性、必填项、枚举和格式转换成表单预览。
Cron 表达式可视化
Cron 表达式可视化：用于开发者文档的在线预览、校验和导出工具。
CSS 阴影预览
在真实卡片上预览 CSS box-shadow，并比较多层阴影效果。
jq 过滤器测试器
针对 JSON 运行常见 jq 风格过滤器，并预览过滤结果。
C4 模型图生成器
C4 模型图生成器：用简单 C4 文本生成 System Context、Container 和 Component 图。
颜色调色板预览
预览 hex、rgb、hsl 和 CSS 变量调色板，并做相邻颜色对比度检查。
XML 转图表
把 XML 文档转换为易读结构树，适合查看 RSS、SVG、配置和集成载荷。
JSONPath 测试器
针对 API 响应运行常见 JSONPath 表达式，并查看匹配值。
XPath 测试器
针对 XML 或 HTML 测试 XPath 表达式，并查看匹配节点。
JWT 解码图
JWT 解码图：用于开发者文档的在线预览、校验和导出工具。
cURL 命令解析器
把 cURL 命令解析成 method、URL、headers、query 参数和请求 body 预览。
JSON to Diagram
把 JSON 可视化成可读的对象与数组树。
YAML Path 测试器
预览 Kubernetes、Helm、GitHub Actions 和配置文件中的 YAML 路径。
URL 查询参数解析器
解码 URL 查询字符串，检查 UTM 参数和 API query payload。
CSV 转图表
把 CSV 文件预览成行列结构树，方便快速检查数据。
TOML 可视化预览
查看 pyproject、Cargo 和应用配置中的 TOML section、key 和 value。
YAML to Diagram
把 YAML 文档可视化成可读的树状图。
Dockerfile 可视化
将 Dockerfile 构建阶段和指令可视化为步骤图。
.env 差异检查器
对比 .env 与 .env.example，找出缺失、空值或重复变量。
Draw.io 在线打开
在线打开 draw.io / diagrams.net XML，检查页面、对象、标签和可移植性。
Helm Values 可视化
将 Helm values.yaml 展示为可展开结构，方便 Chart 审查和文档编写。
HTTP 响应头解析器
解析 HTTP 响应头，并检查缓存、CORS、Content-Type 和安全提示。
Nginx 配置可视化
可视化 nginx server、location、proxy_pass、upstream 关系。
Nginx Location 匹配测试器
测试 Nginx exact、prefix、^~ 和 regex location 的匹配优先级。
OpenTelemetry Trace 转时序图
将 OpenTelemetry spans JSON 转换为 Mermaid 时序图，便于排查请求链路。
TypeScript Interface 可视化
TypeScript Interface 可视化：把 TypeScript interface/type 转成字段结构图，适合 SDK 和 API 类型文档。
日志转时序图
将简单服务调用日志转换为 Mermaid 时序图。
Zod Schema 可视化
Zod Schema 可视化：把 Zod object schema 转成校验结构图，适合表单、接口和配置校验文档。
GraphQL Schema 可视化
可视化 GraphQL type、input、interface、enum、字段和关系。
Protobuf Schema 可视化
把 .proto 中的 message、字段、enum、service 和引用关系可视化。
AsyncAPI 事件流图
将 AsyncAPI channels 转换为生产者、频道、消费者事件流图。
DBML 转 ER 图
把 DBML schema 转成 ER 图，检查表关系、枚举、注释和基数。
Prisma Schema 图
将 Prisma model 块转换为 ER 风格 Schema 图。
Draw.io 转 SVG 预览
把未压缩 diagrams.net / draw.io XML 预览为 SVG，并在发布前检查边界和标签。
优先推荐
先从这些高价值工具开始
Mermaid 在线预览
实时预览 Mermaid 流程图、时序图、类图和 ER 图，并导出 SVG/PNG。
AI 图表生成器
用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。
文本转 Mermaid
把产品说明、事故记录、架构文本和需求草稿转换成可编辑 Mermaid 图表。
Mermaid AI 修复器
用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。
PlantUML 在线预览
在线预览 PlantUML 时序图、类图、用例图和活动图。
AI Draw.io 生成器
用 AI 生成可编辑 diagrams.net / draw.io XML，用于架构图、CI/CD 和数据流草稿。