图表

本文将举例说明如何使用 Mermaid 制作图表。

使用 Mermaid 代码块§

1```mermaid
2graph TD;
3    A-->B;
4    A-->C;
5    B-->D;
6    C-->D;
7```
markdown

A

B

C

D

使用 Mermaid 短代码§

 1{{< mermaid >}}
 2sequenceDiagram
 3    participant Alice
 4    participant Bob
 5    Alice->>John: Hello John, how are you?
 6    loop Healthcheck
 7        John->>John: Fight against hypochondria
 8    end
 9    Note right of John: Rational thoughts <br/>prevail!
10    John-->>Alice: Great!
11    John->>Bob: How about you?
12    Bob-->>John: Jolly good!
13{{< /mermaid >}}
markdown
JohnBobAliceJohnBobAliceloop[Healthcheck]Rational thoughts prevail!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!

延伸阅读§

  • 全部
  • English
  • 한국어
  • 简体中文
  • 最佳匹配
  • 最旧的
  • 最新的
  • Big Data
  • DevOps
  • JAVA
  • Mac
  • NoSQL
  • RDB
  • Shell
  • Web
  • 주절주절
  • Content
  • 内容
  • Java Collections
  • Docs
  • Examples
  • Notes
  • Releases
  • 发布
  • 文档
  • 示例
  • 笔记
  • Apache Spark
  • AZURE
  • Bash
  • CodeIgniter
  • Command Line Tools
  • CSV
  • Docker
  • Git
  • Github pages
  • Homebrew
  • Humor
  • IDE
  • IntelliJ IDEA
  • JAVA String
  • JAVA17
  • List
  • macOS
  • MySQL
  • PHP
  • Redis
  • Script
  • SDKMAN
  • Set
  • Shell
  • Spring Boot
  • Terminal
  • TRY-CATCH
  • Windows
  • Charts
  • Diagrams
  • Images
  • Installation
  • KaTeX
  • Layouts
  • Math
  • Mermaid
  • Migration
  • 图片
  • 图表
  • 安装
  • 布局
  • 数学
  • 迁移