如何优雅的用 Markdown 画流程图
公众号关注 「奇妙的 Linux 世界」
设为「星标」,每天带你玩转 Linux !
今天推荐的这个项目是「mermaid」,一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。
下面是一些可以使用 Mermaid 创建的图表示例:
1、流程图
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
2、时序图
sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthcheckJohn->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
3、甘特图
ganttsection SectionCompleted :done, des1, 2014-01-06,2014-01-08Active :active, des2, 2014-01-07, 3dParallel 1 : des3, after des1, 1dParallel 2 : des4, after des1, 1dParallel 3 : des5, after des3, 1dParallel 4 : des6, after des4, 1d
4、类图
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
5、饼图
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
体验地址:https://mermaid-js.github.io/mermaid-live-editor/edit
开源项目地址:https://github.com/mermaid-js/mermaid
开源项目作者:mermaid-js
本文转载自:「GitHub黑板报」,原文:https://tinyurl.com/3tu5yrca,版权归原作者所有。欢迎投稿,投稿邮箱: editor@hi-linux.com。
最近,我们建立了一个技术交流微信群。目前群里已加入了不少行业内的大神,有兴趣的同学可以加入和我们一起交流技术,在 「奇妙的 Linux 世界」 公众号直接回复 「加群」 邀请你入群。
你可能还喜欢
点击下方图片即可阅读
eCapture : 一款无需 CA 证书,直接抓取 HTTPS 网络明文通讯的神器
点击上方图片,『美团|饿了么』外卖红包天天免费领
更多有趣的互联网新鲜事,关注「奇妙的互联网」视频号全了解!
如何优雅的用 Markdown 画流程图相关推荐
- 5分钟使用markdown画流程图
很多情况下我们需要画流程图,很多工具很复杂,很多功能用不到,很多时候我们只想画简单的流程图,不像有太多的学习负担,下面我们介绍一种方法,通过简单的几个规则用markdown画流程图,不到5分钟即可上手 ...
- markdown 画流程图
一直在用markdown(不得不说markdown语法真的太强大太简洁了,效果也太优美,没学过markdown语法的可以自己学下)写东西,知道用markdown可以画出来很性感的流程图,遂决定学下如何 ...
- Markdown画流程图、时序图(顺序图)、甘特图
typora 画流程图.时序图(顺序图).甘特图 复制以下代码使用 typora 的源码模式粘贴到编辑器中查看效果: 以下几个实例效果图如下: 1.横向流程图源码格式: ```mermaid grap ...
- Atom-使用Markdown画流程图
最近接手了好几个新项目,看别人的代码总得记录一下,不然过脑之后一点感觉都没有.我会一边看代码,一边在编辑器里写一下代码的执行流程,但都是文字,不是很清晰.那画流程图吧,用个画图工具画流程图显得很麻烦! ...
- markdown画流程图,流程图语法
首先要知道流程图里各个形状的含义: 其中最主要用到的还是圆角矩形(表示起止),平行四边形(输入输出),菱形(判断)和直角矩形(操作/执行) 这里介绍流程图的简单语法: 符号 类别/含义 start 开 ...
- markdown画流程图
使用工具: Typora 轻量级markdown工具 使用方法: 添加代码,选择flow语言 基本语法: MarkDown中的流程图语法叫flow,该语法只有两个注意事项:定义元素和连接定义好的元素 ...
- 有道云-markdown画流程图
TB - top bottom(自上而下) BT - bottom top(自下而上) RL - right left(从右到左) LR - left right(从左到右) graph TD //T ...
- Vscode 用MarkDown画流程图
效果图 start=>start: 开始 input=>inputoutput: 输入 operation=>operation: 操作 condition=>conditio ...
- DiagramDesigner 画流程图软件使用心得
1. 介绍 DiagramDesigner 是一款小巧方便的画流程图软件, 之前用过atom+markdown画流程图,比较之后发觉还是DiagramDesigner好用,在此分享一点使用技巧 2. ...
最新文章
- docker小技巧-清理未使用空间
- python学习费用-python学习,是看免费视频自学,还是报个收费班学习好?
- BarTender安装常见问题集结
- 卧虎藏龙2不显示服务器列表,《卧虎藏龙贰》iOS平台 合服公告(第2期)
- UVA - 10384The Wall Pushers推门游戏(迭代加深)
- 1月3日 升 级gazebo7
- 什么是java 前端_java前端后端分别是指什么?
- Unity3D Demo
- Windows10必装的宝藏便签软件不用起来太可惜了
- Print Label with Barcode Using ZPLII
- Echart图实现tooltips循环轮播(方法)
- R如何读取csv文件
- Windows上软件的未来:什么是MSIX文件?
- 【Nand2tetris】Project01
- 3des java ecb_C# And Java 3DES加解密 ECB模式/PKCS7
- 浅析群控系统的发展之路,云控和群控的巨大差别
- js关闭当前弹出的小窗口并打开新窗口
- LeetCode刷题之575.分糖果
- 关于JVM中Eden区、Survivor from区和Survivor to区的理解
- IIC、SPI和UART区别
热门文章
- GetAsyncKeyState函数
- h0055. 长方体
- 今日宇宙最热科技:NASA电动飞机来了,以色列超级芯片提速100倍!
- 建网站并不难,只需6个步骤,就能做出一个网站
- 历史证明品牌人格化是个好策略
- 数据分享|R语言用主成分PCA、 逻辑回归、决策树、随机森林分析心脏病数据并高维可视化...
- Elasticsearch启动时,出现Permission denied,权限不足报错
- c 中空格的asc码表_[转]回车、换行、空格的ASCII码值—(附ASCII码表)
- ASCII码表及回车、换行、空格
- HTTPS协议握手过程见解