使用marmaid让mrakdown支持作图

使用marmaid让markdown支持作图

• mermaid官网

• 使用目的

  • 让编辑轻量化
  • 简单的文本就可以制作出流程图、时序图、甘特图、用例图
  • 选择支持mermaid并且自己喜欢的编辑环境，而不用来回切换(这是非常重要的，比如我经常使用的是VSCode各种快捷键会让文本编辑变得很容易，相比一些拖拖拽拽可视化那种编辑方式，文本编辑不见得会有多慢)

• 使用环境 主流的博客和markdown编辑器都支持mermaid,以下只列出测试可用的

  • 编辑器
    • VSCode 需下载扩展[Markdown Preview Mermaid Support]
    • typora(支持实时预览的MarkDown编辑器，并且不用分屏，做了很多内置的快捷优化，使用起来很方便，唯一的缺点是快捷键与VS这类IDE没法比)
  • 博客平台
    • CSDN(对于markdown进行了更丰富的支持)
    • 博客园(相比CSDN支持的更好，缺点是发布之后才能预览。。。)

• 我的使用体验

  • 对于自己零散的想法可以使用VSCode以文本的形式编辑
  • 如果想要分享到博客平台，直接粘贴到博客园/CSDN

• 流程图的制作相当的简单自由，官方的教程示例非常详细

经验

• 流程图的连接线太僵硬了，严重影响没关呀。官方FAQ How to change flowchart curve style?,其中在MarkDown中的处理方式是在mermaid块内部加上2行用于指定曲线类型的语句,

  %% 
  linkStyle default interpolate MonotoneX
  

  它支持所有的D3Curves,主要的各种样式示例如下：

  • Linear 默认的就是线性的
  graph LR; %% linkStyle default interpolate Linear A --> B1 A --> B2 A --> B3
  • Basis
  graph LR; %% linkStyle default interpolate Basis A --> B1 A --> B2 A --> B3
  • MonotoneX
  graph LR; %% linkStyle default interpolate MonotoneX A --> B1 A --> B2 A --> B3
  • MonotoneY
  graph LR; %% linkStyle default interpolate MonotoneY A --> B1 A --> B2 A --> B3
  • Cardinal
  graph LR; %% linkStyle default interpolate Cardinal A --> B1 A --> B2 A --> B3
  • Bundle
  graph LR; %% linkStyle default interpolate Bundle A --> B1 A --> B2 A --> B3
  • CatmullRom
  graph LR; %% linkStyle default interpolate CatmullRom A --> B1 A --> B2 A --> B3
  • Cardinal
  graph LR; %% linkStyle default interpolate Cardinal A --> B1 A --> B2 A --> B3

• 一些不错的功能

  • 让流程图中的节点作为链接 click id link introduce,示例Click A "https://www.baidu.com" "百度"

• 使用marmaid的流程图来制作简易的思维导图

  graph LR; %% linkStyle default interpolate MonotoneX A(核心主题) --> B1 A --> B2 A --> B3 B1 --> B1C1 B1 --> B1C2 B2 --> B2C1

  可以满足轻量级的思维导图，节点不能太多，因为它不支持折叠节点呀，太多了屏幕放不下。