当前位置：首页 > article >正文

mermaid 图表相关

article 2024/10/10 7:58:36

1.mermaid图表的代码

1.1 flowchart 流程图代码

flowchart TD
    A[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 时序图代码

sequenceDiagram
    Alice->>+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 干诺图代码

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

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命令手动生成即可