Mermaid 图表显示

---

块图

block
  columns 3
  前端 blockArrowId6<[" "]>(right) 后端
  space:2 down<[" "]>(down)
  硬盘 left<[" "]>(left) Database[("数据库")]

  classDef front fill:#696,stroke:#333;
  classDef back fill:#969,stroke:#333;
  class Frontend front
  class Backend,Database back

演示：

思维导图

mindmap
    root((核心主题))
        子主题1
            子主题1.1
            子主题1.2
        子主题2
            子主题2.1
            子主题2.2
        子主题3

演示：

  markmap
  # 前端面试
  ### HTML
  - 语义化标签
  - SEO 优化
  ### CSS
  - Flex 布局
  - Grid 布局
  ### JavaScript
  - 闭包
  - 事件循环

演示：

连线

graph LR
    A[Start] --> B{Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B --->|No| E[End];

演示：

graph LR
emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六


朱雄英--长子-->朱标--长子-->emperor
emperor2((朱允炆))--次子-->朱标
朱樉--次子-->emperor
朱棡--三子-->emperor
emperor3((朱棣))--四子-->emperor
emperor4((朱高炽))--长子-->emperor3

演示：

边框

graph
    默认方形
    id1[方形]
    id2(圆边矩形)
    id3([体育场形])
    id4[[子程序形]]
    id5[(圆柱形)]
    id6((圆形))

演示：

graph
	id1{菱形}
	id2{{六角形}}
	id3[/平行四边形/]
	id4[\反向平行四边形\]
	id5[/梯形\]
	id6[\反向梯形/]

演示：

程序提交分支图

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit

演示：

    gitGraph
       commit
       commit id: "Normal" tag: "v1.0.0"
       commit
       commit id: "Reverse" type: REVERSE tag: "RC_1"
       commit
       commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"
       commit

演示：

XY 坐标图

---
config:
    xyChart:
        width: 900
        height: 600
        showDataLabel: true
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
---
xychart
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

演示：

参数配置

参数	描述	默认值
width	图表的宽度	700
height	图表的高度	500
titlePadding	标题的顶部和底部填充	10
titleFontSize	标题字体大小	20
showTitle	标题是否显示	true
xAxis	x 轴配置	AxisConfig
yAxis	y 轴配置	AxisConfig
chartOrientation	'vertical' 或 'horizontal'	'vertical'
plotReservedSpacePercent	最小空间图将占据图表内部	50
showDataLabel	应在栏内显示与栏对应的值	false

AxisConfig

参数	描述	默认值
showLabel	显示轴标签或刻度值	true
labelFontSize	要绘制的标签的字体大小	14
labelPadding	标签的顶部和底部填充	5
showTitle	是否显示轴标题	true
titleFontSize	轴标题字体大小	16
titlePadding	轴标题的顶部和底部填充	5
showTick	勾选是否显示	true
tickLength	刻度线会持续多长时间	5
tickWidth	刻度线的宽度是多少	2
showAxisLine	轴线是否显示	true
axisLineWidth	轴线粗细	2

看板图

---
config:
  kanban:
    ticketBaseUrl: 'https:// 链接'
---
kanban
  Todo
    [第一条]
    docs[第二条]
  [ 任务1 ]
    id6[ 事项1 . 事项2 . 事项3 .]
  id9[ 任务2 ]
    id8[ 事项4 ]@{ assigned: '作者' }
  id10[ 任务3 ]
    id4[ 事项5 ]@{ ticket: 日期 , assigned: ' 作者 ', priority: 'High' }
    id66[ 事项6 ]@{ priority: 'Very Low', assigned: ' 作者 ' }
  id11[ 任务4 ]
    id5[ 事项7 ]
    id2[ 事项8 ]@{ ticket: 日期 , priority: 'Very High'}
    id3[ 事项9 ]@{ ticket: 日期 , assigned: 作者 , priority: 'High' }

  id12[ 任务5 ]
    id3[ 事项10 ]

演示：

架构图

architecture-beta
    group api(logos:aws-lambda)[API]

    service db(logos:aws-aurora)[Database] in api
    service disk1(logos:aws-glacier)[Storage] in api
    service disk2(logos:aws-s3)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

演示：

雷达图

---
config:
  radar:
    axisScaleFactor: 0.25
    curveTension: 0.1
  theme: base
  themeVariables:
    cScale0: "#FF0000"
    cScale1: "#00FF00"
    cScale2: "#0000FF"
    radar:
      curveOpacity: 0
---
radar-beta
  axis A, B, C, D, E
  curve c1{1,2,3,4,5}
  curve c2{5,4,3,2,1}
  curve c3{3,3,3,3,3}

演示：

一个复杂的案例

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with line break<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

演示：