typoro语法和画各种图

大货车司机24

已于 2024-05-28 14:13:27 修改

阅读量684

点赞数 10

文章标签： java

于 2024-04-28 11:07:42 首次发布

本文链接：https://blog.csdn.net/qq_31217383/article/details/138271641

版权

2024

常用地址

Typora Markdown 常用语法（画图)
Mermaid 绘图 (一) - 流程图 (Flowchart)
Mermaid 中文网
Mermaid在线编辑器
- mermaid mindmap 这个是搜索的关键字
- Mermaid 支持的图表类型包括：
- 流程图 (Flowchart) : 用关键词 graph 或 flowchart 表示
- 顺序图 (Sequence Diagram) : 用关键词 sequenceDiagram 表示
- 类图 (Class Diagram) : 用关键词 classDiagram 表示
- 状态图 (State Diagram) : 用关键词 stateDiagram 表示
- 实体关系图 (Entity Relationship Diagram) : 用关键词 erDiagram 表示
- 用户旅程图 (User Journey Diagram) : 用关键词 journey 表示
- 甘特图 (Gantt Diagram) : 用关键词 gantt 表示
- 饼图 (Pie Chart Diagram) : 用关键词 pie 表示
- 象限图 (Quadrant Chart) : 用关键词 quadrantChart 表示
- 需求图 (Requirement Diagram) : 用关键词 requirementDiagram 表示
- Gitgraph 图 (Gitgraph Diagram) : 用关键词 gitGraph 表示
- 思维导图 (Mindmap) : 用关键词 mindmap 表示
- 时间线图 (Timeline Diagram) : 用关键词 timeline 表示

流程图模板

mermaid
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

时序图模板

案例 https://www.kancloud.cn/yanshandou/kam2/598851

mermaid
sequenceDiagram
Title: title
A->>B: Normal line
B->>C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

复杂的时序图模板
案例 https://www.kancloud.cn/yanshandou/kam2/598851

sequenceDiagram
title: 微信支付时序图
participant 微信支付用户 as user
participant 商户APP客户端 as appc
participant 商户后台系统 as apps
participant 微信支付系统 as wxs
participant 微信客户端 as wxc

user->appc:1.打开商户APP客户端()
appc->appc:2.选择商品下单()
appc->apps:3.请求生成支付订单()
apps->wxs:4.调用统一下单API()
wxs->wxs:生成预付单()
wxs-->>apps:5.返回预付单信息(prepay_id)
apps->apps:6.生成带签名的客户端支付信息()
apps-->>appc:7:返回信息(prepay_id,sign等)
user->appc:8:用户确认支付()
appc-->wxc:9:支付参数通过调用SDK调起微信支付()
wxc->wxs:10.发起支付请求()
wxs->wxs:验证支付参数, APP支付权限等()
wxs-->>wxc:11.返回需要支付授权()
user->wxc:12.用户确认支付, 输入密码()
wxc->wxs:13:提交支付授权()
wxs->wxs:验证授权, 完成支付交易()
wxs-->>apps:15.异步通知商户支付结果()
apps->apps:接收和保存支付通知()
apps->>wxs:16.返回告知已成功接收处理()
wxs-->wxc:14.返回支付结果, 发送微信消息提示()
wxc->appc:将支付状态通过商户APP已实现的回调接口执行回调()
appc->apps:后台查询实际支付结果()
apps->wxs:调用微信查询API查询支付结果()
wxs-->>apps:返回支付结果()
apps-->appc:返回支付结果
appc-->user:展示支付结果()
appc->appc:商户发货()

展示样图

Mermaid 中文网-学习笔记

Mermaid 中文网这个是个人学习笔记，如果想更详细的学习，请移步官网学习教程。

应用实践

123

实体关系图

流程图

序列图

序列图是一种交互图，显示进程如何彼此运行以及以什么顺序运行。

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you ?
    Bob->>Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl->>D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob->>Alice: I agree

  sequenceDiagram
    box Purple Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John, how are you?
    J->>A: Great!
    A->>B: Hello Bob, how is Charley?
    B->>C: Hello Charley, how are you?

类图

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

---
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()
    }

状态图

“状态图是计算机科学及相关字段中用于描述系统行为的一种图表。状态图要求所描述的系统由有限数量的状态组成；有时，情况确实如此，而有时这是一个合理的抽象。”维基百科

甘特图

甘特图是一种柱状图，最初由 Karol Adamiecki 于 1896 年开发，并由 Henry Gantt 在 1910 年代独立开发，它说明了项目进度表以及任何一个项目完成所需的时间。甘特图显示了项目的终端元素和摘要元素的开始日期和完成日期之间的天数。

用户旅程图

用户旅程高度详细地描述了不同用户在系统、应用或网站内完成特定任务所采取的步骤。该技术显示当前（原样）用户工作流程，并揭示未来工作流程的改进字段.

饼图

饼图（或圆形图）是一种圆形统计图形，将其划分为多个切片以说明数字比例。在饼图中，每个切片的弧长（及其中心角和面积）与其表示的数量成正比。虽然它因其类似于切片的馅饼而得名，但它的渲染方式却有多种变化。已知最早的饼图通常归功于 William Playfair 于 1801 年发布的统计手册 - 维基百科

象限图

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

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]

%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart
  x-axis Urgent --> Not Urgent
  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Delegate
  quadrant-4 Delete

需求图

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

Gitgraph 图表

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

此类图表对于开发者和 DevOps 团队分享他们的 Git 分支策略特别有帮助。例如，它可以更轻松地可视化 git flow 的工作原理。

---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

C4 图

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

    C4Component
    title Component diagram for Internet Banking System - API Application

    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

    Container_Boundary(api, "API Application") {
        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
        Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")

        Rel(sign, security, "Uses")
        Rel(accounts, mbsfacade, "Uses")
        Rel(security, db, "Read & write to", "JDBC")
        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
    }

    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
    Rel(spa, accounts, "Uses", "JSON/HTTPS")

    Rel(ma, sign, "Uses", "JSON/HTTPS")
    Rel(ma, accounts, "Uses", "JSON/HTTPS")

    UpdateRelStyle(spa, sign, $offsetY="-40")
    UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")

    UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
    UpdateRelStyle(ma, accounts, $offsetY="-40")

        UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
        UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
        UpdateRelStyle(security, db, $offsetY="-40")
        UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")

思维导图

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

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

mindmap
Root
    A
      B
      C

时间线图

“时间线是一种图表，用于说明事件、日期或时间段的年表。它通常以图形方式渲染以指示时间的流逝，并且通常按时间顺序组织。基本时间线按时间顺序渲染事件列表，通常使用日期作为标记。时间线还可以用来展示事件之间的关系，比如一个人一生中的事件之间的关系”（维基百科）.

timeline
        title MermaidChart 2023 Timeline
        section 2023 Q1 <br> Release Personal Tier
          Bullet 1 : sub-point 1a : sub-point 1b
               : sub-point 1c
          Bullet 2 : sub-point 2a : sub-point 2b
        section 2023 Q2 <br> Release XYZ Tier
          Bullet 3 : sub-point <br> 3a : sub-point 3b
               : sub-point 3c
          Bullet 4 : sub-point 4a : sub-point 4b

ZenUML

Mermaid 可以使用 ZenUML 渲染序列图。请注意，ZenUML 使用与 mermaid 中原始序列图不同的语法。

zenuml
    title Reply message
    Client->A.method() {
      B.method() {
        if(condition) {
          return x1
          // return early
          @return
          A->Client: x11
        }
      }
      return x2
    }

桑基图

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

---
config:
  sankey:
    showValues: false
---
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

XY 图表

在 mermaid-js 的上下文中，XY 图表是一个综合图表模块，包含利用 x 轴和 y 轴进行数据表示的各种类型的图表。目前，它包括两种基本图表类型：柱状图和折线图。这些图表旨在直观地显示和分析涉及两个数值变量的数据。
值得注意的是，虽然 mermaid-js 当前的实现包含这两种图表类型，但该框架被设计为动态且适应性强的。因此，它具有将来扩展和包含其他图表类型的能力。这意味着用户可以在 XY 图表模块中期待一套不断发展的图表选项，以满足随着时间的推移引入新图表类型的各种数据可视化需求。

---
config:
    xyChart:
        width: 900
        height: 600
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
---
xychart-beta
    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]

框图文档

框图是一种直观、有效的方式来直观地表示复杂的系统、流程或架构。它们由块和连接器组成，其中块代表基本组件或功能，连接器显示这些组件之间的关系或流程。这种图表方法在工程、软件开发和流程管理等各个字段都至关重要。

框图的主要目的是提供系统的高级视图，以便轻松理解和分析，而无需深入研究每个组件的复杂细节。这使得它们对于简化复杂系统以及解释系统内组件的整体结构和交互特别有用。

许多人使用 Mermaid 流程图来达到此目的。这样做的副作用是自动布局有时会将形状移动到图表制作者不想要的位置。框图使用不同的方法。在此图中，我们让作者完全控制形状的放置位置。

block-beta
  columns 3
  a:3
  block:group1:2
    columns 2
    h i j k
  end
  g
  block:group2:3
    %% columns auto (default)
    l m n o p q r
  end