公众号关注 「奇妙的 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 画流程图相关推荐

  1. 5分钟使用markdown画流程图

    很多情况下我们需要画流程图,很多工具很复杂,很多功能用不到,很多时候我们只想画简单的流程图,不像有太多的学习负担,下面我们介绍一种方法,通过简单的几个规则用markdown画流程图,不到5分钟即可上手 ...

  2. markdown 画流程图

    一直在用markdown(不得不说markdown语法真的太强大太简洁了,效果也太优美,没学过markdown语法的可以自己学下)写东西,知道用markdown可以画出来很性感的流程图,遂决定学下如何 ...

  3. Markdown画流程图、时序图(顺序图)、甘特图

    typora 画流程图.时序图(顺序图).甘特图 复制以下代码使用 typora 的源码模式粘贴到编辑器中查看效果: 以下几个实例效果图如下: 1.横向流程图源码格式: ```mermaid grap ...

  4. Atom-使用Markdown画流程图

    最近接手了好几个新项目,看别人的代码总得记录一下,不然过脑之后一点感觉都没有.我会一边看代码,一边在编辑器里写一下代码的执行流程,但都是文字,不是很清晰.那画流程图吧,用个画图工具画流程图显得很麻烦! ...

  5. markdown画流程图,流程图语法

    首先要知道流程图里各个形状的含义: 其中最主要用到的还是圆角矩形(表示起止),平行四边形(输入输出),菱形(判断)和直角矩形(操作/执行) 这里介绍流程图的简单语法: 符号 类别/含义 start 开 ...

  6. markdown画流程图

    使用工具: Typora 轻量级markdown工具 使用方法: 添加代码,选择flow语言 基本语法: MarkDown中的流程图语法叫flow,该语法只有两个注意事项:定义元素和连接定义好的元素 ...

  7. 有道云-markdown画流程图

    TB - top bottom(自上而下) BT - bottom top(自下而上) RL - right left(从右到左) LR - left right(从左到右) graph TD //T ...

  8. Vscode 用MarkDown画流程图

    效果图 start=>start: 开始 input=>inputoutput: 输入 operation=>operation: 操作 condition=>conditio ...

  9. DiagramDesigner 画流程图软件使用心得

    1. 介绍 DiagramDesigner 是一款小巧方便的画流程图软件, 之前用过atom+markdown画流程图,比较之后发觉还是DiagramDesigner好用,在此分享一点使用技巧 2. ...

最新文章

  1. docker小技巧-清理未使用空间
  2. python学习费用-python学习,是看免费视频自学,还是报个收费班学习好?
  3. BarTender安装常见问题集结
  4. 卧虎藏龙2不显示服务器列表,《卧虎藏龙贰》iOS平台 合服公告(第2期)
  5. UVA - 10384The Wall Pushers推门游戏(迭代加深)
  6. 1月3日 升 级gazebo7
  7. 什么是java 前端_java前端后端分别是指什么?
  8. Unity3D Demo
  9. Windows10必装的宝藏便签软件不用起来太可惜了
  10. Print Label with Barcode Using ZPLII
  11. Echart图实现tooltips循环轮播(方法)
  12. R如何读取csv文件
  13. Windows上软件的未来:什么是MSIX文件?
  14. 【Nand2tetris】Project01
  15. 3des java ecb_C# And Java 3DES加解密 ECB模式/PKCS7
  16. 浅析群控系统的发展之路,云控和群控的巨大差别
  17. js关闭当前弹出的小窗口并打开新窗口
  18. LeetCode刷题之575.分糖果
  19. 关于JVM中Eden区、Survivor from区和Survivor to区的理解
  20. IIC、SPI和UART区别

热门文章

  1. GetAsyncKeyState函数
  2. h0055. 长方体
  3. 今日宇宙最热科技:NASA电动飞机来了,以色列超级芯片提速100倍!
  4. 建网站并不难,只需6个步骤,就能做出一个网站
  5. 历史证明品牌人格化是个好策略
  6. 数据分享|R语言用主成分PCA、 逻辑回归、决策树、随机森林分析心脏病数据并高维可视化...
  7. Elasticsearch启动时,出现Permission denied,权限不足报错
  8. c 中空格的asc码表_[转]回车、换行、空格的ASCII码值—(附ASCII码表)
  9. ASCII码表及回车、换行、空格
  10. HTTPS协议握手过程见解