基本图形和线型

  1. ## 样例1
  2. ```mermaid
  3. graph LR
  4. A[方形] 
  5. B(圆角)
  6. C{条件a}
  7. D[结果1]
  8. E[结果2]
  9. F((圆形))
  10. G[方形]
  11. X[结果3]
  14. A --实线--> B
  15. B -.虚线.-> A
  16. B --长直线----> G
  17. B --> C
  18. C ==> |粗实线| D
  19. C -.无箭头虚线.- E
  20. C --无箭头实线--- X
  21. B --> F
  1. <a name="pwDRK"></a>
  2. ### ![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1656428206480-800d2a1e-5809-47a0-948b-83e311304763.png#clientId=u419e4faf-a92e-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u1e778b9a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=447&originWidth=815&originalType=url&ratio=1&rotation=0&showTitle=false&size=41285&status=done&style=none&taskId=u62848af3-85a6-46df-8512-e926f781fa2&title=)扩展图形和线形
  3. ```java
  4. ## 样例2
  5. ```mermaid
  6. flowchart LR
  7. H([体育场形])
  8. I[(圆柱形)]
  9. J[[子程序形]]
  10. K{{六角形}}
  11. L[/平行四边形/]
  12. M[\反向平行四边形\]
  13. N[/梯形\]
  14. O[\反向梯形/]
  15. H <--双向--> I
  16. J x--取消--x K
  17. L o--圆点连接--o M
  18. N --变形--> O
  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1656428229246-cc8817db-65c3-402b-83e5-4cd00fab33d0.png#clientId=u419e4faf-a92e-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=uddb7c4f2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=442&originWidth=514&originalType=url&ratio=1&rotation=0&showTitle=false&size=30031&status=done&style=none&taskId=u905706ca-ad4c-4fe6-95ba-84428aa91b4&title=) 
  2. <a name="IPEM6"></a>
  3. ### 线性图
  4. ```java
  5. ### 线型图
  6. ```mermaid
  7. graph LR
  8. emperor((朱八八))-.子.->朱五四-.子.->朱四九-.子.->朱百六
  11. 朱雄英--长子-->朱标--长子-->emperor
  12. emperor2((朱允炆))--次子-->朱标
  13. 朱樉--次子-->emperor
  14. 朱棡--三子-->emperor
  15. emperor3((朱棣))--四子-->emperor
  16. emperor4((朱高炽))--长子-->emperor3
  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1656428249775-54789b5a-a672-4da7-8534-2d54153c9ec6.png#clientId=u419e4faf-a92e-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u678b5a5e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=539&originWidth=986&originalType=url&ratio=1&rotation=0&showTitle=false&size=53065&status=done&style=none&taskId=u8ccabf44-e497-404c-b81f-1f6e39a3e92&title=)
  2. <a name="l9ZUC"></a>
  3. ### 饼形图
  4. ```java
  5. ### 饼形图
  6. ```mermaid
  7. pie
  8.     title 为什么总是宅在家里？
  9.     "喜欢宅" : 15
  10.     "天气太热或太冷" : 20
  11.     "穷" : 50
  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1656428266266-cb35929d-9f53-4f5a-bbfc-6b2040414c97.png#clientId=u419e4faf-a92e-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u12db1e62&margin=%5Bobject%20Object%5D&name=image.png&originHeight=476&originWidth=737&originalType=url&ratio=1&rotation=0&showTitle=false&size=42988&status=done&style=none&taskId=u74d703b3-0c13-44c5-b735-33a1101b948&title=)
  2. <a name="hniQp"></a>
  3. ### 流程图
  4. ```java
  5. ### 流程图
  6. ```mermaid
  7. graph LR
  8.     A[Start] --> B{Is it?};
  9.     B -- Yes --> C[OK];
  10.     C --> D[Rethink];
  11.     D --> B;
  12.     B -- No ----> E[End];
  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1656428289503-110cca31-b48d-4806-8897-5f1caa2074eb.png#clientId=u419e4faf-a92e-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u994c7193&margin=%5Bobject%20Object%5D&name=image.png&originHeight=246&originWidth=779&originalType=url&ratio=1&rotation=0&showTitle=false&size=20707&status=done&style=none&taskId=u2af7c8fb-1f3e-4b3c-8f99-54f1c405998&title=)
  2. <a name="PFLsY"></a>
  3. ### 多重链
  4. ```java
  5. ### 多重链
  6. ```mermaid
  7. graph 
  8.    a --> b & c--> d
  10.    A & B--> C & D
  12.     X --> M
  13.     X --> N
  14.     Y --> M
  15.     Y --> N
  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1656428386646-bdef750c-8fb0-460a-8340-e97eac8fdae7.png#clientId=u419e4faf-a92e-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u2f04ba9c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=393&originWidth=655&originalType=url&ratio=1&rotation=0&showTitle=false&size=31841&status=done&style=none&taskId=ud192dc3d-49da-4444-abad-037f770e7f2&title=)
  2. <a name="Uf8Ts"></a>
  3. ### 子图 
  4. ```java
  5. ### 子图
  6. ```mermaid
  7. flowchart TB
  9.     c1-->a2
  10.     subgraph one
  11.     a1-->a2
  12.     end
  13.     subgraph two
  14.     b1-->b2
  15.     end
  16.     subgraph three
  17.     c1-->c2
  18.     end
  19.     one --> two
  20.     three --> two
  21.     two --> c2
  1. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1656428407215-8610a098-98c5-4ed1-8522-ce4d416c90a2.png#clientId=u419e4faf-a92e-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=uc43bc466&margin=%5Bobject%20Object%5D&name=image.png&originHeight=469&originWidth=386&originalType=url&ratio=1&rotation=0&showTitle=false&size=22433&status=done&style=none&taskId=u4207c9e9-b928-4384-9cd3-76422d6f1d7&title=)
  2. <a name="GK9h1"></a>
  3. ### 注释 
  4. ```java
  5. ### 注释
  6. ```mermaid
  7. graph LR
  8. %%这是一条注释，在渲染图中不可见
  9.     A[Hard edge] -->|Link text| B(Round edge)
  10.     B --> C{Decision}
  11.     C -->|One| D[Result one]
  12.     C -->|Two| E[Result two]

``` image.png