使用MarkDown来画图

sequence时序图

小案例

代码如下:

```mermaid

sequenceDiagram
title: 成员定义
participant A as a
participant B as b
a–>>b : A指向B
b->>a : B指向A

显示结果:

#mermaid-svg-ch7zermz2XPchl58 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ch7zermz2XPchl58 .error-icon{fill:#552222;}#mermaid-svg-ch7zermz2XPchl58 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ch7zermz2XPchl58 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ch7zermz2XPchl58 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ch7zermz2XPchl58 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ch7zermz2XPchl58 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ch7zermz2XPchl58 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ch7zermz2XPchl58 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ch7zermz2XPchl58 .marker.cross{stroke:#333333;}#mermaid-svg-ch7zermz2XPchl58 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ch7zermz2XPchl58 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ch7zermz2XPchl58 text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-ch7zermz2XPchl58 .actor-line{stroke:grey;}#mermaid-svg-ch7zermz2XPchl58 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-ch7zermz2XPchl58 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-ch7zermz2XPchl58 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-ch7zermz2XPchl58 .sequenceNumber{fill:white;}#mermaid-svg-ch7zermz2XPchl58 #sequencenumber{fill:#333;}#mermaid-svg-ch7zermz2XPchl58 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-ch7zermz2XPchl58 .messageText{fill:#333;stroke:#333;}#mermaid-svg-ch7zermz2XPchl58 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ch7zermz2XPchl58 .labelText,#mermaid-svg-ch7zermz2XPchl58 .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-ch7zermz2XPchl58 .loopText,#mermaid-svg-ch7zermz2XPchl58 .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-ch7zermz2XPchl58 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-ch7zermz2XPchl58 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ch7zermz2XPchl58 .noteText,#mermaid-svg-ch7zermz2XPchl58 .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-ch7zermz2XPchl58 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ch7zermz2XPchl58 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ch7zermz2XPchl58 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-ch7zermz2XPchl58 .actorPopupMenu{position:absolute;}#mermaid-svg-ch7zermz2XPchl58 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-ch7zermz2XPchl58 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-ch7zermz2XPchl58 .actor-man circle,#mermaid-svg-ch7zermz2XPchl58 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-ch7zermz2XPchl58 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} a b a b A指向B B指向A a b a b 成员定义

007高级用法-使用MD来画时序图和流程图相关推荐

  1. Mac下安装 PlantUML 插件画时序图、UML类图

    1. 安装 PlantUML 插件 安装完 PlantUML 就可以画时序图.流程图了. 但是,不能画 UML 类图,还少了一个图形渲染的工具 Graphviz. 2.在 Mac 上安装 Graphv ...

  2. Intellij IDEA中安装使用PlantUML画时序图、类图等

    转载自 https://www.jianshu.com/p/a6bd7e3048ef 一.在Intellij安装PlantUML插件 在菜单栏Intellij IDEA打开插件安装窗口(版本不一样,可 ...

  3. 还在到处寻找画图软件？快来用Typora画饼图、时序图、流程图、UML图和状态图吧

    Markdown是我最喜欢的写作格式,现在我的博客.笔记等都是用markdown格式写的,基础的文字编辑相关的语法用的已经很顺手了,本文就来记录一下用Markdown编辑器画图的方法. 我现在使用一款 ...

  4. 【实用工具】Visio画时序图组件

    本文由FPGA爱好者小梅哥编写,未经作者许可,本文仅允许网络论坛复制转载,且转载时请标明原作者. Visio画时序图组件,实用方法很简单,下载,解压,然后放到一个固定的位置,Visio默认的查找位置为 ...

  5. uml画时序图操作步骤

    本人使用的是staruml工具,下载地址:https://share.weiyun.com/5HtcSvV 在日常工作中,不管是需求分析.流程设计.源码解读,通过uml工具画时序图都是一个很有效的辅助 ...

  6. 在线画时序图的工具：Web Sequence Diagrams ，支持实时生成预览图

    因为工作需要,这两天在尝试着给手里壹些模块画时序图(Sequence Diagrams),壹般画这种图的时候,我们第壹反应会想到安装 IBM 的 Rational Rose,但是我不想为了画这种图就去 ...

  7. Markdown如何画时序图，一篇就够了

    文章目录 markdown 如何画图 1. 时序图 1.1 时序图介绍 1.2 参与者 1.2.1 画法1(不带昵称) 1.2.2 画法2(使用参与者别名) 1.3 消息 1.4 激活框 1.5 注释 ...

  8. 用viso画时序图（使用步骤）

    在进行时序分析时,常常需要画出时序图来更直观的观察 下面就说明怎样使用viso画时序图(版本2016) 1.打开viso,新建一个空白绘图,点击创建 2.按照下图点击更多形状->工程->电 ...

  9. 用代码画时序图！YYDS

    前言 最近通过代码来画时序图,UML用例图,感觉很不错,所以给大家分享一下. 日常开发,一般在设计阶段,我们都需要画时序图.用例图等等.大家平时画图的时候,是用draw.io还是processOn呢? ...

最新文章

  1. 年终盘点篇：2018年开源市场5大发展趋势
  2. 将jsp页面转化为图片或pdf（一）（qq:2798641729）
  3. 1.sql 数据据基础_数据库的组成
  4. write RE validation
  5. ASP.NET MVC中的ActionResult--总结
  6. java递归统计_Java类递归计数
  7. JS中var、let、const区别？ 用3句话概括
  8. 墨条不如墨汁黑是怎么回事？
  9. 计算机定时关机教程,电脑定时关机怎么设置|如何让电脑定时关机
  10. codeBook背景建模
  11. DM_SQL建表语法
  12. 【uni-app踩坑记录】uni-starter本地微信一键授权登录失败
  13. 常用24位颜色表转换成16位颜色值,让16位lcd使用
  14. 陈莉君教授: 回望踏入Linux内核之旅
  15. SAP扫盲系列之一：什么是SAP系统和应用服务器
  16. 在Android运行cocos Demo游戏
  17. 科学探索奖名单揭晓：北大数学「黄金一代」袁新意上榜，首现90后获奖人
  18. (c语言)兔子繁衍问题
  19. 勒索病毒来自美国网络武器库 破解靠重装系统
  20. ICN6211-6202MIPI转RGB MIPI转LVDS

热门文章

  1. 大鱼吃小鱼算法java，瞬间高大上了！
  2. 人人网移动开发架构及相关服务器架构
  3. python中append函数解析_对python中的pop函数和append函数详解
  4. ctf php沙箱,详谈CTF中常出现的PHP反序列化漏洞
  5. 从CPU架构--x86架构和arm架构处理器--功耗
  6. 【Power Automate】日期格式化函数formatDateTime详细说明及示例
  7. android 经纬度 转换,andorid将经纬度转换到手机屏幕上显示
  8. 2022-2023年度江苏省职业院校技能大赛“网络安全”赛项中职组圆满成功
  9. 反向代理－－ WEB服务的加速器[转]
  10. 移动小额支付业务系统几种常用实现方式的分析和比较