首页 > 其他分享 >Markdown 图表

Markdown 图表

时间:2022-09-05 12:44:35浏览次数:85  
标签:Markdown 示例 对象 图表 -- right cond op

流程图

mermaid

  • mermaid 是一个用于画流程图、时序图、类图、状态图、实体关系图、甘特图、饼状图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。
  • API
  • 项目地址
  • 有道云指南
  • 示例一
graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2]
  • 示例二
gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发 学习准备理解需求 :crit, done, 2014-01-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1, 20h 测试报告 :48h

有些 markdown 编辑器需要在代码块标记代码类型,才会正确渲染,如:Typora; 有些标记之后反而不能正确渲染,如有道云笔记。

flow 标准流程图

  • flow 用于绘制流程图,分为两部分:定义节点和控制走向。
  • 示例
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
  • 横向示例
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

sequence 时序图

  • 示例
Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

标签:Markdown,示例,对象,图表,--,right,cond,op
From: https://www.cnblogs.com/arich/p/16657706.html

相关文章

  • Markdown学习
    Markdown学习标题三级标题四级标题#+空格(几个#几级标题)字体粗体(两边两个*)斜体(两边一个*)斜体加粗(两边三个*)特殊(~~)引用(>+空格即可)分割线三个-三个***图......
  • MarkDown语法
    markdown标题方法:#(几个)+空格+内容三级标题四级标题字体方法:加粗(2个星号内容2个星号)斜体(1个星号内容1个星号)加粗斜体(3个星号内容3个星号)......
  • img文件编辑_用 Vim 编辑 Markdown 时直接粘贴图片
    效果演示: 使用方法安装这个插件没有其它依赖,使用自己习惯的插件管理方式安装就好。比如我使用Vundle[2],在vimrc里添加Plugin'ferrine/md-img-paste.vim'然后......
  • markdown学习
    Markdown学习二级标题三级标题四级标题   字体helloworld!helloworld!helloworld!helloworld!    引用一二三四五  分割线   ......
  • markdown preview enhanced插件导出为.html文件
      不知不觉,vscode和Markdown文档的配合使用已经用了很久了,但对于没有使用过Markdown的小伙伴,想要给他快速的分享你的Markdown笔记,却是一个问题。解决方案  使用vscod......
  • Markdown学习
    Markdown学习标题三级标题四级标题 字体Hello,World!Hello,World!Hello,World!Hello,World! 引用java 分割线 图片 超链接点击跳转 列表A......
  • Vue+Echarts图表自适应
    图表的自适应,挺简单的,但是有几个需要注意的点。1、我们采用addEvenListener()方法,此方法用于向指定元素添加监听事件。且同一元素目标可重复添加,不会覆盖之前相同事件,配合......
  • Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
    通常,这类需求在客户端应用中不太会用到,但是在后端的各种统计分析模块会经常碰到。比如:通过折线图、柱状图、雷达图等可视化形式,更直观的展现和分析经营状况或系统运行情况......
  • markdown笔记工具
    1、markmap:markdown+思维导图markdown实在是太好用了,简洁方便,最主要是通用。通用:github,博客园,vscode,公众号,幕布(会员下载OPML转)如果能按标题收起,并生成思维导图就更......
  • Echarts 多图表共用legend
    //参考地址:https://www.isqqw.com/echartsdetail?id=31404//加载数据functionLoadDataX(){GetApiDataSync2("url",'POST',{......