Draw Diagrams in Markdown

发表于 更新于

Draw Diagrams in Markdown

I have always been a enthusiast for diagrams because I believe illustrations are a more direct and efficient way to elucidate the truths we want to explore. Meanwhile, I don't need a heavy diagraming tool like PowerPoint. I prefer to a lightweight, cross-platform,easy-to-using tool that can be seamlessly integerated with markdown, and here are several tools build for markdown that I find useful:

If you are interested in any one of these tools, just read the tutorial to get started on your journey.

Most Useful Diagrams in Mermaid

flowchart

---
title: 语法树
---
flowchart TD

subgraph condition1["operaor1 >= operator2"]
    operator1:::high --> operand1["1"]
    operator1 --> operand2["2"]
    
    operator2 --> operand3["3"]
    operator2:::low --> operator1
end

subgraph condition2["operaor1 < operator2"]
    op3["operator1"]:::low
    op4["operator2"]:::high
    operand4["1"]
    operand5["2"]
    operand6["3"]

    op3 --> operand4
    op4 --> operand5
    op4 --> operand6
    op3 --> op4
end

classDef low fill:#90ee90,stroke:#333,stroke-width:4px;
classDef high fill:#ff6347,stroke:#333,stroke-width:4px;

sequenceDiagram

sequenceDiagram
    participant Input
    participant SqlParser
    participant SqlValidator
    participant SqlToRelConverter
    participant Planner
    
    Input -->> SqlParser : string
    SqlParser ->> SqlValidator : SqlNode
    SqlValidator -->> SqlValidator : validate(SqlNode)
    SqlValidator ->> SqlToRelConverter : SqlNode
    SqlToRelConverter -->> SqlToRelConverter : convertQuery(SqlNode)
    NOTE OVER SqlToRelConverter : RexBuilder && SqlNodeToRexConverter convert SqlNode to RexNode
  SqlToRelConverter -->> Planner : RelNode

block-beta

---
title: function stack
---
block-beta
columns 3

block:group1:2
    columns 2
    stack3["stack 3"]:2
    stack2["stack 2"]:2
    stack1["stack 1"]:2
    stack0["stack 0"]:1
    stackPointer:1
end
stackPointer --> stack0
desc1["empty"]:1

block:group2:2
    columns 2
    Local2["..."]:2
    Local1["Local 1"]:2
    Local0["Local 0"]:1
    basePointer
    Function:1
    functionPointer
end
desc2["reserved for locals"]:1
basePointer --> Local0
functionPointer --> Function

block:group3:2
    columns 1
    OtherValue1["..."]:1
    OtherValue2["Other Value 3"]:1
    OtherValue3["Other Value 2"]:1
    OtherValue4["Other Value 1"]:1
end
desc3["pushed before call"]

classDef front 1,fill:#FFCCCC,stroke:#333;
classDef back fill:#969,stroke:#333;
classDef op fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef header fill: #696,color: #fff,font-weight: bold,padding: 10px;

class stack3 op
class stack2 op
class stack1 op
class stack0 op

class Local0 header
class Local2 header
class Local1 header
class Function header

class OtherValue1 back
class OtherValue2 back
class OtherValue3 back
class OtherValue4 back

class basePointer front
class stackPointer front
class functionPointer front