Mermaid 图表绘制

Mermaid 是 Obsidian 内置支持的图表绘制语言,可以用代码方式创建流程图、序列图、甘特图等多种图表。

参考资源

相关笔记


基础示例

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
  flowchart TB
      A("开始") --> B["一级"]
      A --> C("二级")
      A -->|"说明"| D("三级")
	  B --> B1("我是B的下级菜单")
	  C --> C1("我是C的下级菜单")

序列图/Sequence

sequenceDiagram
    咖啡豆->>+普洱: 你好 普洱, 你好吗?
    咖啡豆->>+普洱: 普洱, 你能听到我吗?
    普洱-->>-咖啡豆: 好的 咖啡豆, 我可以听见你!
    普洱-->>-咖啡豆: 我感觉好极了!

甘特图/Gantt

gantt
    title 咖啡豆的甘特图
    dateFormat  YYYY-MM-DD
    section 主线任务
    咖啡豆的文档站           :a1, 2023-10-10, 30d
    咖啡豆的公众号           :after a1  , 20d
    section 支线任务
    咖啡豆的示例库    :2023-10-12  , 12d
    咖啡豆的插件      : 24d

class 类图

classDiagram
    Animal <|-- Duck
    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()
    }

ER 图

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

5 mindmap 导图

mindmap
  root((咖啡豆的导图))
    第一层A1
      第二层A11
      ::icon(fa fa-book)
      第二层A12
        我是一麻袋的咖啡豆子正文内容
    第一层B1
      第二层B11<br/>换了一行
      第二层B12
        一个节点B121
            节点的下一级a
            节点的下一级b
            节点的下一级c
    第一层C1
      一个节点C11
      一个节点C12

百分比饼图 pin

pie title 咖啡豆社区组成
    "咖啡豆微信群" : 60
    "咖啡豆文档站" : 20
    "公众号" : 10
    "B站视频" : 10

四象限图

quadrantChart
    title 一个研究咖啡豆子的SWOT图表📊
    
    x-axis "有帮助🔥" --> "有害的☠️"
    y-axis "外部来源/环境属性" --> "内部来源/组织属性"
    
    quadrant-1 "【Weaknesses/劣势☠️】"
    quadrant-2 "【Strengths/优势🔥】"
    quadrant-3 "【Opportunities/机会🔥】"
    quadrant-4 "【Threats/威胁☠️】"
    
    "咖啡豆文档站": [0.3, 0.7]
    "咖啡豆公众号": [0.2, 0.8]
    "咖啡豆微信群": [0.35, 0.9]
    "咖啡豆微信群": [0.25, 0.6]
    
    "网站要花钱": [0.3, 0.23]
    "写作要花时间": [0.30, 0.34]
    
    "电脑罢工崩溃": [0.7, 0.79]
    
    "心情不好不想写了": [0.78, 0.34]

时间轴

timeline
    title 咖啡豆社群发展史
    2023-02-03 : 咖啡豆文档站上线
    2023-03-03 : 咖啡豆社群组建
    2023-03-04 : 蹦跶的咖啡豆公众号发布
    2023-09-03 : www.obsidian.vip上线
timeline
        title 咖啡豆的第二种时间轴-带详细分类的
        section 咖啡豆文档站
          第一时间点 : 写着好玩没啥事,闲得慌
          第二时间点 : 认真写文,持续更新
        section 咖啡豆公众号
          第一 阶段 : 源于突然的想法开始写作.
                  : 为了部分不能及时. 追新的同学们更新. 很有意思的内容
          第二 阶段 : 内容和网站有所区分.
                  : 会包括不能长期更新内容. 文字中间的换行. 主要看看怎换行了.

git

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

state 图

stateDiagram-v2
    [*] --> 我是咖啡豆
    我是咖啡豆 --> [*]
    我是咖啡豆 --> 打成咖啡粉
    打成咖啡粉 --> 我是咖啡豆
    打成咖啡粉 --> 泡成咖啡
    泡成咖啡 --> [*]