viva
  • 主页
  • 开发
    • IDE环境
      • Vim
      • VSCode
        • code-server
        • theia
    • Golang手册
    • Ansible
    • SaltStack
      • salt-api
    • Python
      • Q&A
      • Hello,world!
      • 类型
        • 数字
        • 字符串
        • 列表
        • 元组
        • 集合
        • 字典
      • 语法
        • 流程控制
        • 循环
      • 工具
        • pip
        • pyenv
        • selenium
      • 示例
    • Shell
    • Vue
      • ant-design
      • vue-material
    • Java
  • 随笔
    • WSL2
    • Git
    • Markdown
      • mermaid
    • Linux
      • 时钟同步
      • 账号
      • 文件
      • SSH
      • systemd
      • TLS加密
        • Openssl
      • 存储
        • rsync
        • NFS
      • 路由
      • 日志采集
        • Journalctl
        • Fluentd
          • 根据字段匹配对日志进行结构化
        • Logstash
    • 虚拟化
      • Hyper-V
      • PXE
    • 命令行工具
      • zsh
    • Nexus3
    • 堡垒机
      • JumpServer
    • 测试工具
      • ioping
      • apache bench
      • dd
      • postman
    • 开源项目管理
      • Github
    • 软件包管理
    • 网络镜像源
    • 网关
      • Nginx
  • 存储
    • Ceph
      • 安装
      • 故障处理
    • Etcd
    • Mysql
  • 网络
    • Overlay网络
    • IPVS
    • 网络工具
      • tshark
      • tcpdump
    • 防火墙
      • nftables
      • firewalld
      • iptables
    • 域名解析
      • dig
      • nslookup
      • dnsmasq
    • 代理
      • Clash
      • Redsocks
      • Redsocks2
      • COW
      • Proxfier
  • 云原生
    • 容器
      • Docker
        • Dockerfile
        • docker-compose
      • Podman
      • 原理
        • Chroot
        • Namespace
        • Cgroup
    • 镜像仓库
      • Harbor
    • Kubernetes
      • 部署
        • Kind
        • Minikube
        • kubespray
      • CNI
        • Flannel
        • OVS
        • Calico
      • Operator
        • OperatorSDK
      • StorageClass
      • Q&A
    • Openshift
      • 集群部署
      • 快速使用
    • Prometheus
      • prometheus-operator
      • kube-prometheus
      • Thanos
        • 组件
          • Bucket
          • Check
          • Compact
          • Querier
          • Receiver
          • Ruler
          • Sidecar
          • Store
        • 参考资料
      • Cortex
        • 组件
          • Alertmanager
          • Config
          • Distributor
          • Ingester
          • Querier
          • Query Frontend
          • Ruler
        • 参考资料
      • Thanos与Cortex方案对比
      • 参考资料
      • Q&A
    • Skywalking
    • Rook
    • Helm
    • Istio
    • 应用部署
      • Nexus
      • RabbitMQ
    • 参考资料
  • DevOps
    • 开源DevOps平台
    • CICD
      • Jenkins
    • 参考资料
  • 机器学习
    • Kubeflow
      • 示例
由 GitBook 提供支持
在本页
  • 项目地址
  • 官方文档
  • 在线编辑器
  • 示例
  • 流程图
  • 序列图
  • 甘特图
  • 类图(实验性)
  • Git分支图(实验性)
  • VSCode插件
  1. 随笔
  2. Markdown

mermaid

上一页Markdown下一页Linux

最后更新于5年前

项目地址

官方文档

在线编辑器

示例

流程图

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

显示效果:

序列图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

显示效果:

甘特图

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

显示效果:

类图(实验性)

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

显示效果:

Git分支图(实验性)

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

显示效果:

VSCode插件

流程图
序列图
甘特图
GIt分支图
GitHub - mermaid-js/mermaid: Generation of diagram and flowchart from text in a similar manner as markdownGitHub
mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.
Online FlowChart & Diagrams Editor - Mermaid Live Editor
https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-previewmarketplace.visualstudio.com
Logo
类图