mermaid學習筆記

這不是完整的筆記。

因爲想畫甘特圖,但是又不是很想使用鼠標,所以我找到了mermaid

官網和相關參考資料:

  1. mermaid官網
  2. Yarn中文文檔
  3. npm安裝Yarn_簡書
  4. NPM與YARN安裝與配置_CSDN
  5. Mermaid Live Editor
  6. mermaid工具_CSDN

安裝

我直接使用官網給的安裝教程,也就是使用Node.js:

yarn add mermaid

安裝Node.jsYarn的方法可以在網上找得到。上面給出了Yarn的中文文檔網站,裏面有介紹如何安裝。如果安裝了npm,也可以使用npm安裝Yarn

npm install -g yarn

使用

我主要是想在Markdown上面使用mermaid,其他的暫時用不上,所以其他用法沒有記錄,可以到官網查看。

1)在Markdown上面使用mermaid

= =,這個和安裝mermaid應該沒什麼關係。因爲我是使用了VScode,所以我安裝了一個可以預覽mermaid的插件,如下圖:
在這裏插入圖片描述
= =嗯,輸入例子:

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

可以得到這樣的效果(windows 10):
在這裏插入圖片描述
嗯= =,效果不怎麼好,但是暫且將就一下吧。聽說有些markdown編輯器和筆記軟件對mermaid有支持,比如typora就可以,可以看這裏

2)Mermaid Live Editor

在網上看到一個在線的mermaid編輯器:Mermaid Live Editor

這個網站可以導出SVG格式的圖片。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章