mermaid 图表相关

1.mermaid图表的代码

1.1 flowchart 流程图代码

flowchart TDA[Christmas] -->|Get money| B(Go shopping)B --> C{Let me think}C -->|One| D[Laptop]C -->|Two| E[iPhone]C -->|Three| F[fa:fa-car Car]

1.2 sequece 时序图代码

sequenceDiagramAlice->>+John: Hello John, how are you?Alice->>+John: John, can you hear me?John-->>-Alice: Hi Alice, I can hear you!John-->>-Alice: I feel great!

1.3 gantt 干诺图代码

gantttitle A Gantt DiagramdateFormat  YYYY-MM-DDsection SectionA task           :a1, 2014-01-01, 30dAnother task     :after a1  , 20dsection AnotherTask in sec      :2014-01-12  , 12danother task      : 24d

1.4 block 组件图代码

block-betacolumns 3doc>"Document"]:3space down1<[" "]>(down) spaceblock:e:3l["left"]m("A wide one in the middle")r["right"]endspace down2<[" "]>(down) spacedb[("DB")]:3space:3D space Cdb --> DC --> dbD --> Cstyle m fill:#d6d,stroke:#333,stroke-width:4px

2.mermaid图表的生成方式

2.1 在线生成网站 `可导出` `图表较丑`

mermaid.live

支持标准mermaid代码
生成固定的图表：风格无法修改
导出方便

2.2 sublime生成 `图表可以` `截图导出`

安装Node.js：默认安装在C盘，不必选择安装缺少工具
使用npm安装Mermaid CLI
- npm install -g @mermaid-js/mermaid-cli
- 如果因为国外源不稳定，可以选择国内源
  - https://registry.npmmirror.com 淘宝
  - https://mirrors.cloud.tencent.com/npm/ 腾讯
- 重新利用国内源安装
  - 使用超级用户权限，启动cmd或powershell：因为按照过程中要删除目录
  - npm cache clean --force
  - npm install -g cnpm --registry=https://registry.npmmirror.com
验证安装
- mmdc -v
使用Mermaid CLI
- mmdc -i input.mmd -o output.svg
- mmdc -i 示例.md -o 示例.png --width 2048 --height 2048 --scale 2 //生成白底图表png
安装sublime插件OmniMarkupPreviewer
安装sublime插件markdown live preview
编写mermaid图表代码
在sublime里完成预览：如果失败，那么cmd里执行mmdc命令手动生成即可