Beauty Diagram

什么是 Beauty Diagram？

Beauty Diagram 是一个在线编辑器，可输入 Mermaid 和 PlantUML 源代码（并可导入某些 draw.io 工作流），渲染出更整洁、适合演示的布局和样式。其核心目的是“美化”这些图表语言的输出——重新间距、重新布局并生成导出就绪结果，而无需用户手动重绘图表。

它支持实时预览、一键美化，并导出 SVG 或 PNG 用于文档、幻灯片和评审。页面还介绍了注重演示的排版和主题，以及序列式动态提示的“动画 SVG”预览。

主要功能

• Mermaid 编辑器，支持实时预览和一键美化：粘贴 Mermaid 源代码，立即查看结果，并应用格式更改，无需重写代码。
• PlantUML 编辑器，支持美化工作流：切换至 PlantUML，粘贴活动源代码，应用格式化器重新对齐间距和图表元素。
• draw.io 导入（Pro）：导入 .drawio 或 XML 导出（网站注明 Pro 版可用）。编辑器将工作流解析为 Mermaid 源代码以进行美化。
• 流程图/活动图的正交路由重新布局：在网格上重新间距和路由图表，使用正交连接（避免对角箭头穿过节点）。
• 主题切换以保持一致样式：无需编辑图表源代码，即可切换主题（列出：modern, atlas, obsidian, atelier）。
• 演示级排版和样式：页面强调 Geist at 14px / 500、OpenType 连字、基线对齐标签，以及柔和阴影而非硬 1px 描边。
• 动画 SVG 预览（相同源代码，不同动态叠加）：在 Mermaid 输出上叠加细微动态（示例：charge, laser, pulse），以澄清序列/方向。
• 用于文档和幻灯片的导出：导出 SVG 和 PNG。页面还说明 Pro 版 4× PNG 导出，SVG 适合屏幕查看，PNG 适用于不支持 SVG 的目标。
• 通过工具栏调整画布节点/线条（源代码不变）：网站描述点击节点/线条打开浮动工具栏，调整背景、边框、线条颜色/宽度和文本颜色；自定义可与图表一起保存并通过链接分享。

如何使用 Beauty Diagram

1. 打开在线编辑器，选择图表类型（Mermaid 或 PlantUML；draw.io 导入注明为 Pro）。
2. 将现有 Mermaid 或 PlantUML 源代码粘贴到编辑器。
3. 使用 Beautify 应用格式化器：重新布局图表并应用选定主题/样式规则。
4. 查看实时预览，可选使用节点/线条工具栏调整颜色，必要时切换主题。
5. 导出为 SVG 或 PNG，用于目标工作流（文档/幻灯片/评审，如页面所述）。

使用场景

• 将 Mermaid 流程图转为幻灯片就绪图形：粘贴 Mermaid 代码，美化以获得正交网格路由和演示调色板/排版，然后导出 SVG 用于嵌入或高缩放查看。
• 修复拥挤的 PlantUML 活动图：切换编辑器标签至 PlantUML，粘贴活动图，美化以标准化间距和泳道/布局细节。
• 在不同演示场景中使用单一图表源：使用主题切换（modern/atlas/obsidian/atelier）渲染相同 Mermaid 内容，用于幻灯片、文档页面或暗色 README。
• 通过减少视觉杂乱提升图表可读性：应用单强调色板，让决策菱形/分支在灰度内容中突出。
• 将 draw.io 工作流引入 Mermaid 格式化管道（Pro）：导入 .drawio 文件或 XML 导出，解析为 Mermaid 源代码，继续在 Mermaid 工作流中编辑/美化。

常见问题

如何美化 Mermaid 流程图？
将 Mermaid 源代码粘贴到编辑器中，点击 Beautify，使用实时预览确认重新布局和样式更改。页面注明原始代码保持不变；渲染结果是发生变化的部分。

PlantUML 活动图也能同样优化吗？
是的。页面描述切换到 PlantUML 标签页，粘贴活动源代码，然后点击 Beautify 以重新对齐泳道并标准化默认紧凑间距。

导出时 SVG 与 PNG 有什么区别？
网站说明 SVG 更适合屏幕查看（文档/网站/Figma 嵌入），因为它在任意缩放下均保持清晰，而 PNG 适用于将导出为 PDF/打印的演示文稿，或目标工具不支持 SVG 时。还提到 Pro 版 4× PNG 导出。

Beauty Diagram 可以导入 draw.io 文件吗？
可以，但标明为 Pro：可将 .drawio 文件或 XML 导出 拖入编辑器。网站称其会解析流程图/序列图为 Mermaid 源代码，以便后续美化。

这只是 Mermaid Live 编辑器的克隆吗？
页面明确对比 Mermaid Live，指出 Beauty Diagram 会后处理 Mermaid 输出——添加重新布局、间距、排版和调色板更改——而非仅渲染 Mermaid 默认输出。

替代方案

• Mermaid Live 编辑器（或其他 Mermaid 渲染器）：适合实时渲染 Mermaid 语法，但源内容表明 Beauty Diagram 专注于后处理默认渲染器，以实现演示级布局和样式。
• 图表创作/白板工具（例如流程图设计工具）：它们可创建幻灯片图形，但可能需要手动重绘，而非美化现有 Mermaid/PlantUML 源代码。
• 支持导出的通用绘图工具：它们可生成 SVG/PNG 输出，但通常围绕绘图工作流，而非 Mermaid/PlantUML 代码的格式化/重新布局。
• draw.io 原生导出工作流：如果图表已在 draw.io 中，可依赖内置导出；Beauty Diagram 的价值在于具体转换/导入为 Mermaid 工作流并随后应用美化规则。