PlantUML 在线生成器

预览地址：http://web.aiheadn.cn/plantuml/

灵感来源

每次需要生成 PlantUML 图表时，都要在本地安装 Java 环境、配置 PlantUML 服务，或者使用在线工具但界面不够友好。因此开发了一个纯前端的 PlantUML 在线生成器，界面现代化，操作简单直观，支持实时预览和多格式导出。

项目简介

PlantUML 在线生成器是一个纯前端实现的 PlantUML 图表生成工具，旨在简化 UML 图表的创建和导出过程。通过简洁的代码编辑器，即可实时生成高质量的 UML 图表，支持 PNG 和 SVG 两种格式，并提供现代化的用户界面和丰富的交互功能。

项目地址

• 在线演示: web.aiheadn.cn/plantuml/
• GitHub 仓库: github.com/2585570153/plantuml-web

框架

项目亮点

纯前端实现，无需安装任何依赖，打开即用。界面采用现代化的设计风格，支持浅色和深色两种主题，可根据使用习惯自由切换。操作流程清晰直观，支持实时预览生成的图表，确认无误后再下载使用。

所有数据在本地浏览器中处理，不会上传到任何服务器，完全保护用户的隐私和代码信息。支持多种输出格式，满足不同场景需求，无论是文档插入还是网页展示都能轻松应对。

• 实时预览生成的图表，所见即所得
• 支持 PNG 和 SVG 两种输出格式
• 提供浅色和深色双主题切换
• 支持全屏查看大尺寸图表
• 一键下载生成的图表文件
• 可复制图片链接，方便分享
• 内置示例代码，快速上手
• 自动保存配置和主题偏好

核心功能模块

1. 代码编辑器模块 (script.js)

   • 支持输入和编辑 PlantUML 代码
   • 内置示例代码，一键加载
   • 提供清空功能，快速重置
   • 支持代码格式验证

2. 图表生成模块 (script.js)

   • 使用 PlantUML Encoder 编码代码
   • 调用 PlantUML 服务生成图表
   • 同时生成 PNG 和 SVG 两种格式
   • 处理网络请求和错误提示

3. 预览与导出模块 (script.js)

   • 实时显示生成的图表预览
   • 支持全屏模式查看大图
   • 提供 PNG 和 SVG 下载功能
   • 支持复制图片链接分享

4. 主题管理模块 (script.js, styles.css)

   • 实现浅色和深色主题切换
   • 自动保存主题偏好
   • 平滑的主题过渡动画
   • 响应式设计适配多端

5. 配置管理模块 (script.js)

   • 保存 PlantUML 服务地址
   • 记住输出格式选择
   • 使用 localStorage 持久化
   • 自动加载保存的配置

使用流程

1. 打开在线工具页面
2. 配置 PlantUML 服务地址（默认已提供）
3. 选择输出格式（PNG 或 SVG）
4. 在代码编辑区输入 PlantUML 代码，或点击”示例代码”加载示例
5. 点击”生成图片”按钮或按 Ctrl/Cmd + Enter 快捷键
6. 在预览区查看生成的图表
7. 点击”下载 PNG”或”下载 SVG”按钮保存到本地
8. 如需全屏查看，点击”全屏查看”按钮（按 ESC 退出）

技术特性

• 纯前端实现：无需后端服务，所有处理在浏览器中完成
• 响应式设计：完美适配桌面端和移动端设备
• 主题切换：支持浅色和深色两种主题，自动保存偏好
• 键盘快捷键：Ctrl/Cmd + Enter 快速生成，ESC 关闭全屏
• 实时预览：代码输入后立即生成图表预览
• 多格式支持：同时生成 PNG 和 SVG，满足不同需求
• 本地存储：自动保存服务地址和格式选择

注意事项

1. CORS 配置：PlantUML 服务必须配置 CORS 允许跨域请求，否则无法正常获取图片
2. 服务地址格式：服务地址必须以 / 结尾，例如：http://example.com/plantuml/
3. 网络要求：需要能够访问配置的 PlantUML 服务器
4. 浏览器兼容性：推荐使用 Chrome、Edge、Firefox 等现代浏览器