首页 > 其他分享 >用Mermaid画流程图、序列图、类图、甘特图

用Mermaid画流程图、序列图、类图、甘特图

时间:2024-04-29 22:58:17浏览次数:28  
标签:-- 甘特图 图表 序列图 Bob Mermaid

左手编程,右手年华。大家好,我是一点,关注我,带你走入编程的世界。

公众号:一点sir,关注领取编程资料

Mermaid简介

Mermaid 是一种基于文本的图表定义语言,它允许开发者使用文本和代码的形式来创建图表。这种语言的设计初衷是为了方便版本控制和多人协作,同时简化图表的维护和更新过程。

Mermaid的使用场景

Mermaid可以支持markdown格式,所有很多时候修改是比较方便的,所有有很多方便的地方,主要有以下使用场景

1、版本控制集成,由于图表以文本形式存在,它们可以无缝地与代码一起进行版本控制。

2、多图表支持,支持多种类型的图表,包括流程图、序列图、甘特图、类图、状态图和实体关系图等。

3、自动布局、Mermaid 提供了自动布局功能,可以减少手动调整图表布局的工作量。

4、多种输出格式、可以生成多种格式的图像,如 SVG、PNG 和 PDF,方便在不同场景下使用。

Mermaid实例展示

很多人可能觉得Mermaid可能挺难的,这网易难倒是不难,主要在于语法比较多,真的使用的时候可能需要不停的查找相关信息。Mermaid 支持多种图表类型,每种类型都有其特定的语法。以下是一些常见图表类型的 Mermaid 语法示例,更详细的语法可以上官方网站去了解,这里只是展示一些图表,方便大家观看。

流程图 (Flowchart)

graph LR A[开始] --> B[处理] B --> C{结果} C -->|Yes| D[成功] C -->|No| E[失败]

这个流程图展示了一个简单的决策过程,从开始到处理,然后根据结果是成功还是失败,分别导向不同的结果。

序列图 (Sequence Diagram)

sequenceDiagram participant Alice participant Bob Alice->>Bob: Hello Bob, how are you? Bob-->>Alice: I am good thanks!

序列图展示了两个参与者之间的交互过程,例如 Alice 和 Bob 之间的对话。

甘特图 (Gantt Diagram)

gantt title 项目开发时间线 dateFormat YYYY-MM-DD section 设计 需求分析 :design1, 2023-04-01, 3d 系统设计 :design2, after design1, 5d section 开发 编码 :dev1, after design2, 10d 测试 :test1, after dev1, 3d

甘特图用于展示项目的时间线和各个阶段的持续时间,非常适合项目管理。

类图 (Class Diagram)

classDiagram Class01 <|-- Class02: Inheritance Class03 *-- Class04: Composition Class05 o-- Class06: Association

类图用于展示不同类之间的关系,如继承、组合和关联。

状态图 (State Diagram)

stateDiagram [*] --> State1 State1 --> [*] State1 --> State2 State2 --> State3

状态图展示了对象可能处于的不同状态以及状态之间的转换。

实体关系图 (Entity-Relationship Diagram)

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

实体关系图用于展示不同实体之间的关系,常用于数据库设计。

结语

我也是最近在接触到了这个Mermaid,提供了一个强大而灵活的方式来创建图表,特别适合于需要频繁更新图表内容的技术文档和软件开发项目。总的来说这个Mermaid有一定的学习成本,因为有相关大量的语法需要学习,用不用主要看自己吧,了解一些总是百利而无一害的,你说是吧!不过需要注意的是,有些平台是不支持这个mermaid语法的,就是markdown格式无法解析出图片来,真的在某些平台发文章的时候,可能需要转成图片来。

标签:--,甘特图,图表,序列图,Bob,Mermaid
From: https://www.cnblogs.com/kiwiblog/p/18166779

相关文章

  • 新手也能学会的甘特图制作教程
    ##甘特图是什么?甘特图(GanttChart)是一种以图表形式直观展示项目计划的工具,由20世纪初的管理学家亨利·甘特(HenryGantt)发明并命名。它具有以下几个主要特点:1.水平时间轴甘特图的横轴是一条时间轴,通常按天、周或月来刻度,直观展示了项目从开始到结束的整个时间跨度。2.任......
  • 甘特图是什么?利用甘特图来优化项目管理流程
     甘特图是项目管理软件中十分常见的功能,可以说每一个项目经理都要学会使用甘特图才能更好的交付项目。什么是甘特图?甘特图用来做什么?简单来说一种将项目任务与时间关系直观表示的图表,直观地展示了任务进度和持续时间。图片来源zz-plan甘特图一、甘特图的定义和特点1.定义......
  • 甘特图使用小诀窍,项目把控游刃有余
    在项目管理过程中,掌握甘特图的使用技巧可以让你事半功倍,高效规划和监控项目进度。作为一种视觉化的工具,甘特图直观地展示了任务的开始和结束时间、持续时间以及任务之间的依赖关系,有助于预测和优化资源分配。掌握以下几个小诀窍,你就能驾驭甘特图,游刃有余地把控整个项目。下......
  • 把控项目风险看这里!甘特图实用范例教你防患于未然
    作为项目经理,最大的噩梦莫过于项目临门一脚被迫中止或延期,导致资源大量浪费。防患于未然,掌握风险管理是关键。而甘特图不仅是展示进度的利器,同时也是发现并规避项目风险隐患的利器。我们今天就来看几个运用甘特图控制风险的实用范例。 利用zz-plan甘特图可以快速识别关......
  • 甘特图/横道图制作技巧 - 任务组
    在甘特图中通过合理的任务分组可以让项目更加清晰,修改也更方便。 列如上面的甘特图一眼不太容易看清楚整体的进度。或者需要把所有的任务整体的延迟或者提前只能这样一个一个的任务调整,就比较麻烦。 通过给任务分组,看这上面整体的进度就非常清晰了。整体的进度调整任务进......
  • 利用甘特图实现精细化项目管控
    在项目管理中,通过精细化管控,项目经理能够有效规划、监督和协调各项任务,从而最大限度控制风险,优化资源配置,并确保按时、按质、按量完成项目目标。而在众多项目管理工具中,甘特图无疑是实现精细化项目管控的利器。zz-plan是一个非常好用的在线甘特图制作工具,一个好用的甘特图......
  • 甘特图进度跟踪与风险预警机制
    项目管理就像一场跋涉,甘特图则是我们的路线图和指南针。制定好行程计划后,我们就要跟着它一路前行,时刻核对进度,防患于未然。一张优秀的甘特图不仅绘制了任务的起止时间,更重要的是它将各项工序的逻辑关系和制约条件清晰可见。我们遵循这个时间线前进,就能确保万无一失。通过实......
  • (一)甘特图部分
    目前甘特图样式  目前更新到支持显示订单完成进度,支持下钻四级显示信息。重要代码(一)颜色部分1//进度条颜色2gantt.templates.task_text=function(start,end,task){3letparentState=getColorForTask1(task,end);4let......
  • [幻灯片]软件需求设计方法学全程实例剖析-03-业务用例图和业务序列图
    DDD领域驱动设计批评文集做强化自测题获得“软件方法建模师”称号《软件方法》各章合集pdf已上传至本号的CSDN资源,或到以下地址下载:http://umlchina.com/training/umlchina_03_bm.pdf......
  • 3款免费甘特图制作工具的比较和选择指南
    ##GanntProjectGanttProjecthttps://www.ganttproject.biz/是一款项目管理和调度应用,适用于Windows、macOS和Linux。该应用提供任务层次结构和依存关系、里程碑、基准行、Gantt图表(带生成PERT图表的选项)、资源负荷图表、任务成本计算和导出到PDFsHTML或PNG文件......