MAS开放平台

Appearance

本页目录

在Markdown文档中使用图表 ​

流程图 ​

流程图由节点（几何形状）和边缘（箭头或线条）组成。美人鱼代码定义了节点和边的制作方式，并适应不同的箭头类型、多向箭头以及与子图之间的任何链接。

需要在输出流程图的位置，插入一下代码：

```mermaid
flowchart LR
  A[Hard edge] -->|Link text| B(Round edge)
  B --> C{Decision}
  C -->|One| D[Result one]
  C -->|Two| E[Result two]
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/flowchart.html

序列图 ​

序列图是一种交互图，它显示了进程如何相互操作以及以什么顺序运行。

需要在输出序列图的位置，插入一下代码：

```mermaid
sequenceDiagram
  par Alice to Bob
    Alice->>Bob: Go help John
  and Alice to John
    Alice->>John: I want this done today
    par John to Charlie
      John->>Charlie: Can we do this today?
    and John to Diana
      John->>Diana: Can you help us today?
    end
  end
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/sequenceDiagram.html

类图 ​

类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模，以及用于将模型转换为编程代码的详细建模。类图也可用于数据建模。类图中的类表示主要元素、应用程序中的交互以及要编程的类。

需要在输出类图的位置，插入一下代码：

```mermaid
---
title: Animal example
---
classDiagram
  note "From Duck till Zebra"
  Animal <|-- Duck
  note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
  Animal <|-- Fish
  Animal <|-- Zebra
  Animal : +int age
  Animal : +String gender
  Animal: +isMammal()
  Animal: +mate()
  class Duck{
    +String beakColor
    +swim()
    +quack()
  }
  class Fish{
    -int sizeInFeet
    -canEat()
  }
  class Zebra{
    +bool is_wild
    +run()
  }
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/classDiagram.html

状态图 ​

状态图是计算机科学和相关领域用来描述系统行为的一种图。状态图要求所描述的系统由有限数量的状态组成;有时，情况确实如此，而在其他时候，这是一个合理的抽象。

需要在输出状态图的位置，插入一下代码：

```mermaid
stateDiagram-v2
  [*] --> Still
  Still --> [*]
%% this is a comment
  Still --> Moving
  Moving --> Still %% another comment
  Moving --> Crash
  Crash --> [*]
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/stateDiagram.html

实体关系图 ​

实体关系模型（或 ER 模型）描述了特定知识领域中感兴趣的相互关联的事物。基本 ER 模型由实体类型（对感兴趣的事物进行分类）组成，并指定实体之间可以存在的关系（这些实体类型的实例）。

需要在输出实体关系图的位置，插入一下代码：

```mermaid
erDiagram
  CAR ||--o{ NAMED-DRIVER : allows
  CAR {
    string registrationNumber PK
    string make
    string model
    string[] parts
  }
  PERSON ||--o{ NAMED-DRIVER : is
  PERSON {
    string driversLicense PK "The license #"
    string(99) firstName "Only 99 characters are allowed"
    string lastName
    string phone UK
    int age
  }
  NAMED-DRIVER {
    string carRegistrationNumber PK, FK
    string driverLicence PK, FK
  }
  MANUFACTURER only one to zero or more CAR : makes
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/entityRelationshipDiagram.html

用户旅程 ​

用户旅程非常详细地描述了不同用户在系统、应用程序或网站中完成特定任务所采取的步骤。此技术显示当前（按原样）用户工作流，并揭示未来工作流的改进领域。

需要在输出用户旅程图的位置，插入一下代码：

```mermaid
journey
  title My working day
  section Go to work
    Make tea: 5: Me
    Go upstairs: 3: Me
    Do work: 1: Me, Cat
  section Go home
    Go downstairs: 5: Me
    Sit down: 5: Me
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/userJourney.html

甘特图 ​

甘特图是一种条形图，最初由卡罗尔·阿达米茨基于 1896 年开发，并由亨利·甘特在 1910 年代独立开发，它说明了项目时间表以及任何一个项目完成所需的时间。甘特图说明了项目的最终元素和摘要元素的开始日期和完成日期之间的天数。

需要在输出用户甘特图的位置，插入一下代码：

```mermaid
gantt
  dateFormat  YYYY-MM-DD
  title       Adding GANTT diagram functionality to mermaid
  excludes    weekends
  %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

  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

  section Critical tasks
  Completed task in the critical line :crit, done, 2014-01-06,24h
  Implement parser and jison          :crit, done, after des1, 2d
  Create tests for parser             :crit, active, 3d
  Future task in critical line        :crit, 5d
  Create tests for renderer           :2d
  Add to mermaid                      :1d
  Functionality added                 :milestone, 2014-01-25, 0d

  section Documentation
  Describe gantt syntax               :active, a1, after des1, 3d
  Add gantt diagram to demo page      :after a1  , 20h
  Add another diagram to demo page    :doc1, after a1  , 48h

  section Last section
  Describe gantt syntax               :after doc1, 3d
  Add gantt diagram to demo page      :20h
  Add another diagram to demo page    :48h
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/gantt.html

饼图 ​

饼图（或圆形图）是一种圆形统计图形，它被分成多个切片来说明数字比例。在饼图中，每个切片的弧长（以及其中心角和面积）与其表示的数量成正比。虽然它因其与切片馅饼的相似之处而得名，但它的呈现方式有所不同。

需要在输出用户饼图的位置，插入一下代码：

```mermaid
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/pie.html

象限图 ​

象限图是数据的可视化表示形式，分为四个象限。它用于在二维网格上绘制数据点，其中一个变量在 x 轴上表示，另一个变量在 y 轴上表示。象限是通过根据特定于所分析数据的一组条件将图表分成四个相等的部分来确定的。象限图通常用于识别数据中的模式和趋势，并根据图表中数据点的位置确定操作的优先级。它们通常用于商业、营销和风险管理等领域。

需要在输出用户象限图的位置，插入一下代码：

```mermaid
quadrantChart
  title Reach and engagement of campaigns
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 We should expand
  quadrant-2 Need to promote
  quadrant-3 Re-evaluate
  quadrant-4 May be improved
  Campaign A: [0.3, 0.6]
  Campaign B: [0.45, 0.23]
  Campaign C: [0.57, 0.69]
  Campaign D: [0.78, 0.34]
  Campaign E: [0.40, 0.34]
  Campaign F: [0.35, 0.78]
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/quadrantChart.html

需求图 ​

需求图提供了需求及其相互之间和其他记录元素的连接可视化。建模规范遵循 SysML v1.6 定义的规范。

需要在输出需求图的位置，插入一下代码：

```mermaid
requirementDiagram

  requirement test_req {
  id: 1
  text: the test text.
  risk: high
  verifymethod: test
  }

  functionalRequirement test_req2 {
  id: 1.1
  text: the second test text.
  risk: low
  verifymethod: inspection
  }

  performanceRequirement test_req3 {
  id: 1.2
  text: the third test text.
  risk: medium
  verifymethod: demonstration
  }

  interfaceRequirement test_req4 {
  id: 1.2.1
  text: the fourth test text.
  risk: medium
  verifymethod: analysis
  }

  physicalRequirement test_req5 {
  id: 1.2.2
  text: the fifth test text.
  risk: medium
  verifymethod: analysis
  }

  designConstraint test_req6 {
  id: 1.2.3
  text: the sixth test text.
  risk: medium
  verifymethod: analysis
  }

  element test_entity {
  type: simulation
  }

  element test_entity2 {
  type: word doc
  docRef: reqs/test_entity
  }

  element test_entity3 {
  type: "test suite"
  docRef: github.com/all_the_tests
  }


  test_entity - satisfies -> test_req2
  test_req - traces -> test_req2
  test_req - contains -> test_req3
  test_req3 - contains -> test_req4
  test_req4 - derives -> test_req5
  test_req5 - refines -> test_req6
  test_entity3 - verifies -> test_req5
  test_req <- copies - test_entity2
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/requirementDiagram.html

Gitgraph （Git） 图 ​

Git 图是各种分支上的 git 提交和 git 操作（命令）的图形表示。

这些图表对于开发人员和 DevOps 团队共享他们的 Git 分支策略特别有帮助。例如，它使可视化 git 流的工作原理变得更加容易。

需要在输出Git 图的位置，插入一下代码：

```mermaid
gitGraph
  commit
  commit
  branch develop
  commit
  commit
  commit
  checkout main
  commit
  commit
  merge develop
  commit
  commit
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/gitgraph.html

C4 图 ​

C4图：这是现在的实验图。语法和属性在将来的版本中可能会更改。当语法稳定时，将提供适当的文档。

需要在输出C4图的位置，插入一下代码：

```mermaid
C4Container
  title Container diagram for Internet Banking System

  System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
  Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")

  Container_Boundary(c1, "Internet Banking") {
      Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
      Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
      Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
      ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
      ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")

  }

  System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

  Rel(customer, web_app, "Uses", "HTTPS")
  UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
  Rel(customer, spa, "Uses", "HTTPS")
  UpdateRelStyle(customer, spa, $offsetY="-40")
  Rel(customer, mobile_app, "Uses")
  UpdateRelStyle(customer, mobile_app, $offsetY="-30")

  Rel(web_app, spa, "Delivers")
  UpdateRelStyle(web_app, spa, $offsetX="130")
  Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
  Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
  Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")

  Rel(email_system, customer, "Sends e-mails to")
  UpdateRelStyle(email_system, customer, $offsetX="-45")
  Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
  UpdateRelStyle(backend_api, email_system, $offsetY="-60")
  Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
  UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/c4.html

思维导图 ​

“思维导图是一种图表，用于直观地将信息组织成层次结构，显示整体各部分之间的关系。它通常是围绕单个概念创建的，在空白页的中心绘制为图像，并添加相关的思想表示，例如图像，单词和单词的一部分。主要思想与中心概念直接相关，其他思想则从这些主要思想中分支出来。

需要在输出思维导图的位置，插入一下代码：

```mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
          Creative techniques
          Strategic planning
          Argument mapping
    Tools
      Pen and paper
      Mermaid
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/mindmap.html

时间轴 ​

“时间轴是一种图表，用于说明事件、日期或时间段的年表。它通常以图形方式呈现以表示时间的流逝，并且通常按时间顺序组织。基本时间线按时间顺序显示事件列表，通常使用日期作为标记。时间线也可以用来显示事件之间的关系，例如一个人生活中的事件之间的关系。

需要在输出时间轴图的位置，插入一下代码：

```mermaid
timeline
  title Timeline of Industrial Revolution
  section 17th-20th century
    Industry 1.0 : Machinery, Water power, Steam <br>power
    Industry 2.0 : Electricity, Internal combustion engine, Mass production
    Industry 3.0 : Electronics, Computers, Automation
  section 21st century
    Industry 4.0 : Internet, Robotics, Internet of Things
    Industry 5.0 : Artificial intelligence, Big data,3D printing
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/timeline.html

桑基图 ​

桑基图是一种可视化，用于描述从一组值到另一组值的流动。

需要在输出桑基图的位置，插入一下代码：

```mermaid
sankey-beta

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366
```

显示效果

null

更多图形语法，参见：http://mermaid.js.org/syntax/sankey.html

内部资料，请勿外传

Copyright © 2010-2023 中科天翔