怎么画图？

kroki

自己搭建了 kroki，包含各种各样的文本画图工具可以参考 kroki的例子 markdown 中使用模板如下

{{<diagram name="dot_diagram" type="dot">}}
digraph { Hello -> World }
{{</diagram>}}

Rendering Kroki...

参数说明：

参数	说明	备注
name	图片的名称	每个markdown页面唯一
type	图片的类型	所有 kroki 支持的图片类型，比如 dot 或者 plantuml

常见的支持格式查询

plantuml

plantuml用得比较广泛，可以参考如下

{{<diagram name="plantuml_diagram" type="plantuml">}}
@startuml
skinparam ParticipantPadding 20
skinparam BoxPadding 10

box "Foo1"
participant Alice1
participant Alice2
end box
box "Foo2"
participant Bob1
participant Bob2
end box
Alice1 -> Bob1 : hello
Alice1 -> Out : out
@enduml
{{</diagram>}}

Rendering Kroki...

wavedrom

wavedrom 画波形的工具，语法参考教程

{{<diagram name="wavedrom_diagram" type="wavedrom">}}
{signal: [
  {name:'clk',         wave: 'p....' },
  {name:'Data',        wave: 'x345x', data: 'a b c' },
  {name:'Request',     wave: '01..0' }
],
 head:{
   text:'WaveDrom example',
   tick:0,
   every:2
 },
 foot:{
   text:'Figure 100',
   tock:9
 },
}
{{</diagram>}}

Rendering Kroki...

mermaid

Geekdoc 主题自带集成的 Mermaid

{{< mermaid class="text-center">}}
sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end
{{< /mermaid >}}

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end