zoukankan      html  css  js  c++  java
  • Markdown中使用mermaid画流程图

    Markown语法简单,用来写文档是个不错的选择。

    但是Markdown 语法并不直接支持画图,当然方法还是有的。

    本人用的Markdown编辑器为vscode,在里面直接安装mermaid插件即可使用。

      最近在学习使用携程开源框架Apollo,就以该框架的一些流程图介绍mermaid的使用:先看几个例子

    1.基础模型

    ```mermaid
    graph LR;
      Portal-->|发布/更新配置|Apollo配置中心;
      Apollo配置中心-->|实时推送|App;
      App-->|实时查询|Apollo配置中心;
    ```

    效果图如下:

    2.结构模型

    ```mermaid
    graph TB
      client-->|2 findConfigServices|LoadBalancer;
      LoadBalancer-->|3 findService|metaServer;
      metaServer-->Eureka;
      client-->|4 access via ip:port/client load balance/error retry|ConfigService;
      ConfigService-->|1 register/cancel|Eureka;
      ConfigService-->|read/write|ConfigDB;
    ```

    效果图如下:

    3. 模块依赖图

    ```mermaid
    graph LR;
      client---core;
      client---common;
      core---common;
      common---portal;
      common---Biz;
      Biz---ConfigService;
      Biz---AdminService;
    ```

    效果图如下:

     总结:

    graph  TB(top--botom 上下排列)
    
    graph BT  (botom--top)
    
    graph  LR(left--right 左右排列)
    
    graph  RL (right--left)
    
    -->    在流程图中显示——>
    
    ---    在流程图中显示——

     再来个简单例子:

    ```mermaid
    graph LR;
      A-->|A指向B|B;
      B---|B与C相连|C;
    ```

    增加一种序列图画法:官方例子

    ```mermaid
    sequenceDiagram
        participant Alice
        participant Bob
        Alice->>John:hello John
        loop healthcheck
            John-->>John:fight against
        end
        Note right of John:rational
        
        John->>Alice:great!
        John->>Bob:how about you
        Bob->>John:good!
    
    ```

     注意:如果vscode显示不出来这个图,可能是预览插件没装。把mermaid的插件多装几个没影响

    参考: https://mermaidjs.github.io/#/

    https://cloud.tencent.com/developer/article/1334691

  • 相关阅读:
    streamsets 集成 cratedb 测试
    streamsets k8s 部署试用
    streamsets rest api 转换 graphql
    StreamSets sdc rpc 测试
    StreamSets 相关文章
    StreamSets 多线程 Pipelines
    StreamSets SDC RPC Pipelines说明
    StreamSets 管理 SDC Edge上的pipeline
    StreamSets 部署 Pipelines 到 SDC Edge
    StreamSets 设计Edge pipeline
  • 原文地址:https://www.cnblogs.com/nanqiang/p/8244309.html
Copyright © 2011-2022 走看看