mermaid 图表相关

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

1.4 block 组件图代码

block-beta
    columns 3
    doc>"Document"]:3
    space down1<[" "]>(down) space

  block:e:3
          l["left"]
          m("A wide one in the middle")
          r["right"]
  end
    space down2<[" "]>(down) space
    db[("DB")]:3
    space:3
    D space C
    db --> D
    C --> db
    D --> C
    style 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命令手动生成即可

2.3 vscode生成

• 安装Markdown Preview Mermaid Support插件
• 创建或编辑Markdown文件：需要放在mermaid代码块里
• 预览Mermaid流程图：ctrl+shirf+v
• 截图导出