mermaid 脚本语言

graph TB 从上到下
graph BT 从下到上
graph RL 从右到左
graph LR 从左到右

graph LR;

A001-->B001;

graph LR;
A001-->B001;

graph TB;

C001-->D001;

graph TB;
C001-->D001;

graph TB;

A[001]-->B[111];

A--->C[003];

graph TB;
A[001]-->B[111];
A--->C[003];
-->  实线箭头
--- 实线
-.- 虚线
-.-> 虚线箭头
graph LR;
A[吃早餐]-->B[牛奶];
A---B[热的];
graph LR;
A[吃早餐]-.-B[煎饼];
A-.->C;
C[牛奶]---D[脱脂牛奶];
B---E[不加鸡蛋];
D-.->F[吃饱了];
E-.->F[吃饱了];
graph LR;
A[吃早餐]-.-B[煎饼];
A-.->C;
C[牛奶]---D[脱脂牛奶];
B---E[不加鸡蛋];
D-.->F[吃饱了];
E-.->F[吃饱了];
绘制网络拓扑图
[内容] 矩形
{内容} 菱形
(内容) 圆弧形
>内容] 非对称
((内容)) 圆形
graph TB;
0{设备联网流程图}
A(添加设备)-->B>连接线缆];
B-->C0((PC配置));
graph TB;
0{设备联网流程图}
A(添加设备)-->B>连接线缆];
B-->C0((PC配置));
flowchart
连线为弧形
flowchart TB;
0{设备联网流程图}
A(添加设备)-->B>连接线缆];
B-->C0((PC配置));
flowchart TB;
0{设备联网流程图}
A(添加设备)-->B>连接线缆];
A-->D[123];
B-->C0((PC配置));
|内容|:将内容显示在连线上
flowchart TB;
0{设备联网流程图}
A(添加设备)-->|你好|B>连接线缆];
A-->D[123];
B-->C0((PC配置));
subgraph:定义子模块
flowchart LR;
subgraph 调度服务
1(192.168.121.1)---|高可用|2(192.168.121.111)
end
subgraph web服务
3(192.168.22.12)
4(192.168.121.14)
5(192.168.121.66)
end subgraph 存储服务
6{192.168.121.88}---|高可用|7{192.168.121.99}
end
用户-->调度服务-->3 & 4 & 5-->存储服务
flowchart LR;
subgraph 调度服务
1(192.168.121.1)---|高可用|2(192.168.121.111)
end
subgraph web服务
3(192.168.22.12)
4(192.168.121.14)
5(192.168.121.66)
end

subgraph 存储服务
6{192.168.121.88}---|高可用|7{192.168.121.99}
end
用户-->调度服务-->3 & 4 & 5-->存储服务

mermaid语法画图的更多相关文章

  1. mermaid 语法

    a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2p ...

  2. 使用Mermaid画图

    流程图的示例 时序图的示例 甘特图的示例 FAQ 很多时候,你想解释自己的想法/代码,但是用语言来表达会很啰嗦,并且读者也不易理解.一般这种情况下,我们都会想使用图解来解释.但是,我们也不会想下载那些 ...

  3. Markdown画图(mermaid)学习

    简介 目前博客园支持mermaid的graph,subgraph,sequenceDiagram,gantt,classDiagram mermaid(美人鱼), 是一个类似markdown,用文本语 ...

  4. Markdown语法说明及测试一览表

    标题: Markdown语法说明及测试一览表 作者: 梦幻之心星 347369787@QQ.com 标签: [Markdown, Typora, Markdown_Nice, CSS] 目录: [Ma ...

  5. Hexo引入Mermaid流程图和MathJax数学公式

    近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二: 如果把流程图和数学公式都以图片方式放到文章内,当部署到Github上后,访问博客时图片加载实在太慢, ...

  6. markdown syntax

    Markdown 语法 转载自https://zh.mweb.im/markdown.html 首先应该了解的 每一个 Markdwon 使用者都应该了解的,是 Markdown 最基本的版本,也就是 ...

  7. aha

    欢迎使用 MWeb MWeb 是专业的 Markdown 写作.记笔记.静态博客生成软件,目前已支持 Mac,iPad 和 iPhone.MWeb 有以下特色: 软件本身: 使用原生的 macOS 技 ...

  8. UML建模语言、设计原则、设计模式

    1.UML统一建模语言 定义:用于软件系统设计与分析的语言工具 目的:帮助开发人员更好的梳理逻辑.思路 学习地址:UML概述_w3cschool 官网:https://www.omg.org/spec ...

  9. 新版CSDN-markdown编辑器使用指南

    本文来自CSDN官方,分markdown原文和实际显示部分,推荐开两个窗口对比浏览 Markdown部分 @[TOC](这里写自定义目录dd标题) # 欢迎使用Markdown编辑器 你好! 这是你第 ...

  10. CSDN新版Markdown编辑器(Alpha 2.0版)使用示例(文首附源码.md文件)

    CSDN新版Markdown编辑器(Alpha 2.0版) 使用示例 附 本文的Markdown源码: https://github.com/yanglr/AlgoSolutions/blob/mas ...

随机推荐

  1. MySQL的索引优化

    一.索引的使用场景 1.全值匹配 通过主键索引查询 mysql> explain select * from t_goods where id = 1 \G; ***************** ...

  2. echarts下划线实现

    echarts中无下划线实现,我采用图片填充文本块背景的方式实现 这是从 长空雁叫霜晨月 的博客中得到启发https://www.cnblogs.com/volodya/p/Echarts.html ...

  3. 自动化部署elasticsearch三节点集群

    什么是Elasticsearch? Elasticsearch 是一个开源的分布式搜索和分析引擎,构建在 Apache Lucene 的基础上.它提供了一个分布式多租户的全文搜索引擎,具有实时分析功能 ...

  4. linux wget命令的重要用法:下载文件并保存,后台下载

    Linux wget命令是一个下载文件的工具,它用在命令行下. #从网络下载一个文件并保存在当前目录 [root@node5 ~]# wget http://cn.wordpress.org/word ...

  5. java 项目的创建

    新建一个  Spring Initializr

  6. Swoole 实践篇之结合 WebRTC 实现音视频实时通信方案

    原文首发链接:Swoole 实践篇之结合 WebRTC 实现音视频实时通信方案 大家好,我是码农先森. 引言 这次实现音视频实时通信的方案是基于 WebRTC 技术的,它是一种点对点的通信技术,通过浏 ...

  7. Android OpenMAX(八)如何学习OMXNodeInstance

    前面一篇文章中我们看到media.codec service创建OMX组件后会把组件传递给一个OMXNodeInstance对象,并且把OMXNodeInstance对象返回到Framework层,F ...

  8. 自动化测试在 Kubernetes Operator 开发中的应用:以 OpenTelemetry 为例

    背景 最近在给 opentelemetry-operator提交一个标签选择器的功能时,因为当时修改的函数是私有的,无法添加单测函数,所以社区建议我补充一个 e2e test. 因为在当前的版本下,只 ...

  9. conda错误 创建新环境conda create -n TF117 python=3.5时报错 An unexpected error has occurred. Conda has prepared the above report.

    创建新环境conda create -n TF117 python=3.5时报错 An unexpected error has occurred. Conda has prepared the ab ...

  10. python-去掉写入csv文件的多余的一行空白行

    如执行下面的代码: 1 import csv 2 3 if __name__ == "__main__": 4 5 content1 = ['hello'] 6 content2 ...