AI个人学习
和实操指南

ZenUML:基于简单文本代码创建序列图和流程图

综合介绍

ZenUML 是一个多平台的图表即代码解决方案,专注于创建序列图和流程图。它通过在浏览器中实时渲染图表,避免了服务器端交互的延迟,使用户的思维过程不被低效的拖放操作或缓慢的加载动画所打断。ZenUML 的图表不仅是静态图像,用户还可以与图表进行交互,例如在编辑模式下高亮显示图表上的消息会自动选择相应的代码。ZenUML 强调隐私和安全,从不将数据发送到服务器进行渲染,确保用户数据的安全性。该工具符合 OMG UML 2.5.1 标准,并提供丰富的扩展功能,如云图标,使图表更具可读性。ZenUML 被广泛应用于金融科技、电信和零售等行业,支持多种平台,包括 Confluence、Web 应用、浏览器扩展、IDE 插件和桌面应用。

 

功能列表

  • 实时渲染:在浏览器中实时渲染图表,无需服务器端交互。
  • 交互式图表:用户可以与图表进行交互,快速导航复杂图表。
  • 隐私和安全:不将数据发送到服务器进行渲染,确保数据安全。
  • 标准符合性:符合 OMG UML 2.5.1 标准,并提供丰富的扩展功能。
  • 多平台支持:支持 Confluence、Web 应用、浏览器扩展、IDE 插件和桌面应用。
  • 简洁的 DSL:使用更简洁的 DSL 语言,减少代码行数,提高可读性和可维护性。
  • 专业支持:提供安装、培训和故障支持,大部分问题在 8 小时内解决。
  • 丰富的扩展功能:如云图标,使图表更具可读性。

 

使用帮助

安装流程

  1. Web 应用使用
    • 访问 ZenUML 网站(https://zenuml.com/)。
    • 注册并登录账户。
    • 进入工作区,开始创建图表。
  2. Confluence 插件安装
    • 在 Confluence 管理后台,选择“应用”。
    • 搜索“ZenUML”,点击“安装”。
    • 安装完成后,在页面中添加 ZenUML 宏,开始创建图表。
  3. 浏览器扩展安装
    • 在浏览器扩展商店搜索“ZenUML”。
    • 点击“添加到浏览器”,按照提示完成安装。
    • 安装完成后,点击浏览器工具栏中的 ZenUML 图标,开始创建图表。
  4. IDE 插件安装
    • 在 IDE 的插件市场搜索“ZenUML”。
    • 点击“安装”,按照提示完成安装。
    • 安装完成后,在 IDE 中打开 ZenUML 插件,开始创建图表。

使用流程

  1. 创建序列图
    • 在工作区选择“新建图表”。
    • 选择“序列图”模板。
    • 使用 ZenUML 的 DSL 语言编写代码,例如:
     Alice -> Bob: Hello Bob, how are you?
    Bob --> Alice: I am good thanks!
    
    • 实时预览图表,进行调整和优化。
  2. 创建流程图
    • 在工作区选择“新建图表”。
    • 选择“流程图”模板。
    • 使用 ZenUML 的 DSL 语言编写代码,例如:
     start
    :Step 1;
    :Step 2;
    :Step 3;
    end
    
    • 实时预览图表,进行调整和优化。
  3. 导出和分享图表
    • 完成图表创建后,点击“导出”按钮,选择导出格式(PNG、SVG 等)。
    • 通过链接或嵌入代码分享图表。
  4. 高级功能
    • 使用云图标和其他扩展功能,增强图表的可读性。
    • 在编辑模式下高亮显示图表上的消息,快速导航代码。
    • 访问 ZenUML 帮助中心,获取更多使用技巧和支持。

常见问题

  • 如何确保数据安全? ZenUML 不将数据发送到服务器进行渲染,所有操作均在本地完成,确保数据安全。
  • 如何获取技术支持? 访问 ZenUML 帮助中心,提交支持请求,大部分问题在 8 小时内解决。
  • 是否支持团队协作? ZenUML 支持团队协作,用户可以共享图表链接,共同编辑和查看图表。

 

示意图利器 D2

制作示意图的工具有很多。


我喜欢使用基于文本代码的作图工具,来绘制线框图,比如 Mermaid、Plantuml、Graphviz。

ZenUML:创建快速高效的序列图和流程图-1

它们都能根据代码,生成图片,非常适合放入代码仓库,进行版本管理。

最近,我发现了一个更易用的同类工具 D2,简单直观,功能强大,下面介绍给大家。

ZenUML:创建快速高效的序列图和流程图-2

D2 可以命令行使用,也可以浏览器使用。假定你有一个图片代码文件example.d2,那么生成图片的命令如下。

$ d2 example.d2

大部分时候,我都通过浏览器使用它。它有一个线上生成器 play.d2lang.com(下图),把代码贴进去,按下"compile"按钮,马上生成图片。

ZenUML:创建快速高效的序列图和流程图-3

想要 A 节点(节点的名称为 A),直接输入 A 就可以了。

A

ZenUML:创建快速高效的序列图和流程图-4

A 只是节点名称,如果要定制节点的内容,就像下面这样写。

A: 甲

ZenUML:创建快速高效的序列图和流程图-5

接着,添加一个节点。

A: 甲
B: 乙

ZenUML:创建快速高效的序列图和流程图-6

把它们连起来。

A: 甲
B: 乙
A -> B

ZenUML:创建快速高效的序列图和流程图-7

连接可以用正箭头(->)、也可以用反箭头(<-),甚至双向箭头(<->)。如果不需要箭头,就直接连线(--)。

箭头上还能添加文字。

A: 甲
B: 乙
A -> B: 连接

ZenUML:创建快速高效的序列图和流程图-8

节点之间可以有多根连线。

A: 甲
B: 乙
A -> B: 请求
A <- B: 响应

ZenUML:创建快速高效的序列图和流程图-9

节点的连接也可以写在一行。

甲 -> 丙 <- 乙: 连接

ZenUML:创建快速高效的序列图和流程图-10

阶段一 -> 阶段二 -> 阶段三 -> 阶段四
阶段四 -> 阶段一: 反馈

ZenUML:创建快速高效的序列图和流程图-11

这些语法就够画出基本的线框图了,是不是挺简单。

D2 可以绘制非常复杂的图,更多语法参考文档

ZenUML:创建快速高效的序列图和流程图-12

最后提一下,如果想修改节点形状,方框改成圆形,就像下面这样写。

A: 甲
A.shape: circle

ZenUML:创建快速高效的序列图和流程图-13

形状甚至可以改成一朵云,表示云服务。

A: 甲
A.shape: cloud

ZenUML:创建快速高效的序列图和流程图-14

线条颜色也可以改。

A: 甲
A.style.stroke: red

ZenUML:创建快速高效的序列图和流程图-15

未经允许不得转载:首席AI分享圈 » ZenUML:基于简单文本代码创建序列图和流程图

首席AI分享圈

首席AI分享圈专注于人工智能学习,提供全面的AI学习内容、AI工具和实操指导。我们的目标是通过高质量的内容和实践经验分享,帮助用户掌握AI技术,一起挖掘AI的无限潜能。无论您是AI初学者还是资深专家,这里都是您获取知识、提升技能、实现创新的理想之地。

联系我们
zh_CN简体中文