`
zlq4863947
  • 浏览: 2658 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

js-sequence-diagrams制作时序图

阅读更多

Javascript 时序图



 
js-sequence-diagrams 是一款基于 Javascript 的Web绘制时序图的工具,底层依赖 raphael,最终是生成 SVG。

 

插件地址:https://github.com/bramp/js-sequence-diagrams

文档及实例地址:https://bramp.github.io/js-sequence-diagrams/

 

1、引入必须的文件:

<script src="underscore-min.js"></script>
<script src="raphael-min.js"></script>
<script src="sequence-diagram-min.js"></script>

 

2、你可以直接用html dom的形式

<div id="diagram">Diagram will be placed here</div>
<script> 
  var diagram = Diagram.parse("A->B: Does something");
  diagram.drawSVG('diagram');
</script>

 

或者将这些工作交给 jQuery

<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>
  • 大小: 142.9 KB
分享到:
评论

相关推荐

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

    配置财产描述sequencediagrams.diagram.style 图表样式。 之间选择hand为手工绘制图表或simple的用简单的直线图。 sequencediagrams.preview.trigger 在每次更改或文件保存时配置预览刷新。 在onChange和onSave之间...

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

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

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

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

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

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

    uml时序图

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

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

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

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

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

    点餐系统UML设计

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

    架构设计介绍RUP 4+1架构 & TOGAF 4A架构&uml

    - 处理视图:描述组件间的通信和时序,常用时序图和流程图表示。 - 开发视图:描述模块划分和内部包设计,服务于开发过程,常使用组件图和包图。 - 场景视图:提供一种特定情境下的系统行为快照,有助于理解和验证...

    Timing_v1.0 画时序图的好工具

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

    PlantUML-Language-Reference-Guide-zh

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

    UML入门教程(中文版)(带书签)

    - 顺序图(Sequence Diagrams):描述对象之间交互的时序。 - 协作图(Collaboration Diagrams,也称通信图):描述对象之间的交互和关联。 - 组件图(Component Diagrams):展示系统的物理结构和组件之间的依赖...

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

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

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

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

    casjava源码-case-tool-for-detecting-source-code-incompatibility-with-sequ

    这个工具利用了"顺序图"(Sequence Diagrams)这一建模技术,帮助开发者识别可能导致问题的交互模式。 【描述】"case-tool-for-detecting-source-code-incompatibility-with-sequence-diagrams"描述了这个工具的...

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

    1. **时序图(Sequence Diagram)**: - **基本示例**: 在PlantUML中,使用`-&gt;`表示消息传递,`--&gt;`绘制虚线箭头,`&lt;-`和`&lt;--`提升可读性,但并不影响绘图。 - **声明参与者**: 可以使用`participant`关键字定义参与...

    序列图制作

    序列图(Sequence Diagrams)是UML中的一种图形化工具,主要用于展示系统中对象之间的交互顺序。 **实验目的**主要包括以下几点: 1. **熟练掌握Rose软件的使用**:Rose是一款强大的UML建模工具,能够帮助开发者...

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

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

    timingdesigner指导说明书.zip

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

Global site tag (gtag.js) - Google Analytics