前言

看到主题插件有这个插件, 就顺便琢磨琢磨了) 正好obsidian有mermaid的插件, 预制了一些模板语法以及预览, 正好拿这篇文章试试效果)

• 官网: Mermaid | Diagramming and charting tool
• 在线编辑器: https://mermaid.live/

测试

Flowchart

flowchart LR
Start --> Stop

SequenceDiagram

sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!

StateDiagram

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

EntityRelationshipDiagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

UserJourneyDiagram

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

GanttChart

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

PieChart

pie title /r/obsidianmd posts by type
    "Look at my awesome graph" : 85
    "Look at my cool dashboard" : 14
    "Moved from Notion, liking it" : 1

RequirementDiagram

    requirementDiagram

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

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

GiteGraph

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