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

2.3 vscode生成

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