`
hanmiao
  • 浏览: 57312 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

在线画时序图的工具:Web Sequence Diagrams ,支持实时生成预览图

 
阅读更多

因为工作需要,这两天在尝试着给手里壹些模块画时序图(Sequence Diagrams),壹般画这种图的时候,我们第壹反应会想到安装 IBM 的 Rational Rose,但是我不想为了画这种图就去安装壹個那麽庞大的企业级应用软件,不说使用的时候需要价格极其高昂的 License,就算使用盗版,也需要自己去网上到处找安装包,而公司的 WiFi 网络实在是太牵强,看看新闻查查 Google 还凑合,如果去用来下载几百兆的软件,那就等着吧,不过我手头的事情还得做,于是就想看看网上有没有在线画这种时序图的工具,搜了下,结果还真有,那就是 Web Sequence Diagrams

Web Sequence Diagrams 就是专门为画时序图而准备的,它的特点就是使用简单的编码来控制时序图的各個细节,非常轻便,非常简单,很容易上手。进入首页之后,默认的是壹個横向分成两栏的页面,左侧是文本编辑器,右侧是生成的时序预览图,左侧有壹竖栏是各种时序图组件,点击之后可以在编辑器里自动为你生成样例代码,修改修改就可以用了,并且右上角还有壹個下拉列表可以选择生成的时序图的样式,默认为 napkin,使用这种风格生成的时序图,其线条会不规则的扭来扭去,实际上就是手绘的草图,除此之外,还有:

1、Plain UML:白底黑字的标准时序图(推荐);
2、Rose:IBM Rational Rose 风格的时序图,橘黄色偏红的颜色(推荐);
3、qsd:文档报告中经常会用到的黑白时序图,各种组件四四方方的;
4、VS2010:微软 Visual Studio 风格的标准时序图,淡蓝色(推荐);
5、mscgen:把各個组件上的方框去掉了,只留下了文字的简化版时序图;
6、patent:线条加粗加黑的时序图(推荐);
7、napkin:线条不规则的扭来扭去,实际上就是生成了壹個手绘的时序图;

此处还有其它几种风格,我没有尝试,写的是Colorful,估计生成的时序图颜色会比较绚丽。其中我比较喜欢的几种网络就是 Plain UML,Rose 和 VS2010 这三种风格,因为生成的图片是最符合规范的。按照页面提供的编码方式,我也尝试着为手里的壹個功能模块画了個简单的时序图,其代码也非常有特点,使用正号(+)、负号(-)和左箭头(->)来表示每個流程的执行顺序。具体如下:

title XXX业务的时序图

View->+IService: 发送请求
IService->+ServiceImpl: 服务层处理
ServiceImpl->+Logic:逻辑层处理
Logic->+Dao:持久层处理

Dao->+xxx-sqlMap.xml: 调用指定的SQL语句1
note right of xxx-sqlMap.xml: 与数据库交互1
xxx-sqlMap.xml->-Dao:与数据库交互完毕返回1

Dao->+xxx-sqlMap.xml: 调用指定的SQL语句2
note right of xxx-sqlMap.xml: 与数据库交互2
xxx-sqlMap.xml->-Dao:与数据库交互完毕返回2

Dao->-Logic:持久层交互完毕返回
Logic->-ServiceImpl: 逻辑层交互完毕返回
ServiceImpl->IService: 服务层交互完毕返回
IService->-View: 请求处理完毕,返回页面

因为我個人比较偏爱 IBM Rational Rose 风格,所以也单独生成了该风格的图片。

对了,点击右上角的超链接[Link to this image]可以把生成的图片下载下来,页面会先弹出壹個提示框,询问是否成为付费用户,不用理会,直接点击提示框中的超链接[Open in new tab]就可以在新的选项卡中看到生成好的时序图了。

这個服务对于我这种偶尔需要画画时序图的人而言,真是太方便了,完全不用安装盗版的 IBM Rational Rose,而且还完美的实现了我想要的功能。当然,如果你觉得这個服务对你很有意义,并且愿意长期使用的话,那麽付费支付下也是非常推荐的,因为付费帐户会有更多的功能特性可以使用。另外,强烈建议在 Google Chrome 浏览器下使用该服务,页面刷新时会相比 Firefox 流畅,至于微软的 IE 浏览器,只能呵呵了。

分享到:
评论

相关推荐

    vscode-sequence-diagrams:从简单文本生成UML序列图

    sequencediagrams.preview.trigger 在每次更改或文件保存时配置预览刷新。 在onChange和onSave之间选择。出版构建扩展包yarn installyarn vscode:prepublish发布到商店安装Visual Studio Code Extens

    Timing_v1.0 画时序图的好工具

    在软件工程中,时序图(Sequence Diagram)是一种重要的统一建模语言(UML)图表,它用于描述对象之间的交互,尤其是时间顺序和消息传递。时序图是系统设计过程中不可或缺的一部分,尤其在分析和设计分布式系统、...

    时序图、类图、包图、用况图PPT

    1. **时序图(Sequence Diagrams)**: 时序图是UML中的动态视图,主要用于描述对象间的交互顺序。它展示了对象如何按照时间顺序进行通信,包括消息传递的时间顺序和控制流程。时序图中,对象以生命线表示,垂直线...

    uml时序图

    其中,时序图(Sequence Diagrams)是UML中的一个重要组成部分,主要用于展示对象之间消息交互的顺序。 #### 二、时序图的基本概念 1. **对象**:时序图中的对象用矩形来表示,并且通常会通过对象名和类名加以区分...

    wsd:Web序列图

    布局标题页Web序列图Web序列图此代码是非常新的,不被认为是稳定的Web Sequence Diagrams是一个小型js库,用于实现自定义Web标记<sequence> ,该标记将其data属性中的代码转换为SVG图表视图。 通过嵌入css,它是高度...

    IDEA使用SequenceDiagram插件绘制时序图的方法

    在软件开发过程中,时序图(Sequence Diagram)是一种重要的建模工具,用于描述对象之间的交互关系,特别是消息传递。IntelliJ IDEA(简称IDEA)作为一款强大的Java集成开发环境,提供了许多辅助开发的功能,其中之...

    根据文本描述生成流程图网络序列图GraphViz点图和Railroad图

    在JavaScript中,`railroad-diagrams`库提供了一种生成铁路图的方法,这对于文档编写者解释语言规范或解析器工作原理非常有帮助。 在实际应用中,这些工具和库可以帮助开发者和非开发者更好地理解和沟通复杂的系统...

    confluence-sequence-diagrams:基于 js-sequence-diagrams 的 Confluence 宏插件,用于轻松创建序列图

    首先在 Confluence 中创建/编辑页面,然后通过宏浏览器(在“visuals”下,或搜索“Sequence Diagram”)或简单地输入{sequence-diagram插入宏。 有关符号示例,请参阅。 宏浏览器允许您指定主题(“简单”或“手...

    Web序列:用于生成序列图的实时工具

    类似于CodePen或JSFiddle,但用于生成时序图。 ##部署我们将讨论以下各项的部署: 应用/插件目标本地安慰特拉维斯网络应用火力基地ÿ ñ ÿ 功能火力基地ÿ ñ ñ Chrome扩展程序网上商店ÿ ÿ ñ网络应用程序和...

    点餐系统UML设计

    3. **序列图(Sequence Diagrams)**: 显示对象之间的时间顺序交互。 4. **活动图(Activity Diagrams)**: 描述业务流程或系统的工作流程。 5. **状态图(State Diagrams)**: 描述对象在其生命周期内的状态变化。 ...

    timingdesigner指导说明书.zip

    在现代软件开发过程中,时序图(Sequence Diagrams)作为一种重要的统一建模语言(UML),被广泛用于描述系统中对象间的交互顺序。对于理解系统行为、调试和优化流程来说,时序图的绘制至关重要。而“timingdesigner...

    软件工程实验--计科软工实验,包括数据流图,时序图等vsd图

    本实验主要关注的是软件开发中的几个重要概念,包括数据流图(DFD)、时序图(Sequence Diagrams)等,这些都是UML(统一建模语言)中的核心图表类型。通过VSD(Visual Studio Draw)工具,我们可以更直观地描绘和...

    wsd-util:Web序列图实用程序

    【标题】"wsd-util:Web序列图实用程序"是一个基于JavaScript的工具,主要用于处理和转换WSD(Web Sequence Diagrams)文件。WSD是一种图形表示法,它用于描述Web服务或HTTP交互的过程,帮助开发者可视化和理解系统间...

    PlantUML-Language-Reference-Guide-zh

    时序图(Sequence Diagrams)是一种常用的 UML 图表类型,用于展示系统中对象之间的交互过程。在 PlantUML 中,时序图可以通过一系列简单的指令来绘制。 ##### 2.1 简单示例 - **消息传递**:使用 `->` 来表示参与...

    手机销售系统的UML顺序图与鲁棒图分析

    1. **顺序图(Sequence Diagrams)**: 顺序图主要用来展示对象之间动态的交互顺序,它强调时间序列,显示对象如何按照时间顺序进行通信。在这个手机销售系统中,我们有以下几种顺序图: - **会员注册**:用户...

    sequence-diagram-cli:从终端以文本形式绘制顺序图

    序列图从终端绘制时序图。 韩文和日文(在终端中以字符分隔两个空格)仅在终端中看起来像上面的图像。 您还可以通过编辑style.h自定义样式。安装wget -qO - ...

    软件工程试验指导书软件工程试验指导书

    - **Sequence Diagrams**:表示对象间的时序关系,有助于理解动态系统的行为。 - **Activity Diagrams**:描述业务流程或算法的工作流。 此外,实验还涵盖RationalRose的模型视图(UseCase视图、Logical视图、...

    uml图基本介绍

    2. **时序图**(Sequence Diagrams 另一种称呼): - **定义**:与顺序图相似,时序图也是用来表示对象之间的交互,但更加强调时间顺序。 - **元素**: - **生命线**(Lifeline):表示交互中的参与者。 - **...

    Enterprise_easetup

    它涵盖了多种图表类型,包括但不限于画面迁移图(Use Case Diagrams)、ER图(Entity Relationship Diagrams)、时序图(Sequence Diagrams)以及类图(Class Diagrams)。这些图表在软件开发的各个阶段都发挥着至关...

    绘图工具-- Plantuml 一门可以快速画图的设计语言,学习起来也很方便。

    PlantUML 是一种开源的图形绘制工具,它允许用户通过简单的文本描述来创建各种类型的UML图表,包括时序图、用例图、类图、活动图、组件图、状态图和对象图等。它的主要优点在于提高了绘图效率,避免了传统图形工具中...

Global site tag (gtag.js) - Google Analytics