Everybody Wants Some

Hugo 博客使用 ASCII 码渲染图表

GoAT 尝鲜
 Tech  10052  21 分钟  

GoAT（Go ASCII Tool）

这个是 gohugoio/hugo 新增的功能 —— 原生支持渲染 GoAT 代码块：

「原生」的意思就是「天然的」：天然就可以，无需其他改动。
只要你使用的 Hugo 版本在 ^0.93.0 及以上，你就可以「直接」用上这个功能。

```goat
           .-.           .-.           .-.           .-.           .-.           .-.
          |   |         |   |         |   |         |   |         |   |         |   |
       .---------.   .--+---+--.   .--+---+--.   .--|   |--.   .--+   +--.   .------|--.
      |           | |           | |   |   |   | |   |   |   | |           | |   |   |   |
       '---------'   '--+---+--'   '--+---+--'   '--|   |--'   '--+   +--'   '--|------'
          |   |         |   |         |   |         |   |         |   |         |   |
           '-'           '-'           '-'           '-'           '-'           '-'
```

很炫酷吧？

注意 goat 必须是小写。别的语言标记是忽略大小写的，比如 Python 和 python 都能正常识别。
但这个新功能解析的时候并没有特意处理大小写，是区分大小写的。```GoAT 不会渲染。

缺憾

但截至目前（22.4.30，最新版本 0.98.0）为止，这个功能还不怎么完善。

众所周知，各种博客程序支持 Markdown 标记语言的代码块实现大致相同。都是把

```Language
# content
```

这样的格式解析为

1
2
3

<pre>
# content
</pre>

这样的 HTML 标签 <pre></pre>。
如果标注（markup）的语言支持代码高亮（highlight），再配合前端样式进行进一步渲染。

我看了下 Hugo 对 GoAT 的实现：就是在解析过程中，把语言标记为 goat 的代码块 hook 下来用 bep/goat 这个库渲染成 SVG，再把生成的 SVG 内容填到模板的对应位置。

业务逻辑没什么问题，但实际使用上有一个我觉得比较致命的 —— 痛点吧。那就是：
生成的 SVG 没法指定大小。

官方文档 的示例看起来很完美对不对？它 TM 是手动指定宽度的。
F12 查看页面元素就知道：

  • 要么 <div class="goat svg-container w-40"> 指定容器宽度；
  • 要么直接 <svg width="300"> 指定 SVG 宽度。

那我们直接用的时候呢？
SVG 自适应（响应式）的逻辑是自动 撑满 宽度。

&AMSioiqfbBxujoea(-xdra>efR>coCnuob(nr))dneeJdrosinNoRDtoiuaangddloitneDiagonalsCVuerrvteidcalnotANC:ouldrriAa/Ivnsineehstd-e-trlBihiision'sreqn.u*oobttoelasd'*lineDonSee?arc3h

这样宽度拉满的还好。但如果写的是「纵向且细长」的流程图之类的呢？

自动撑满宽度简直是灾难
┌│└┌│└─R──R──e──e──n──n──d┬││││││││││││││││││││││││││││┴d──e──M<MM<M<M<M<M<M<M──e──r──e─ee─e─e─e─e─e─e──r──e─┐s─│s└s─s─s─s─s─s─s──e──r─s─s─s─s─s─s─s─s─s──r─┐│┘a─a─a─a─a─a─a─a─a─┐│┘┌│└g─g─g─g─g─g─g─g─g─┌│└─B─e─e─e─e─e─e─e─e─e──B──r───────────r──o─2─1>3─4─5─6─7─8─9>─o──w┬││││││││││││││││││││││││││││┴w──s──s──e──e──r──r─┐│┘┐│┘

本博客还是优先阅读体验的设计（使用 reuixiy/hugo-theme-meme 主题）。
你想想其他有些博客，文章宽度是占 80% 页面宽度的。
你再用个三十几吋的 4K 大屏，那是一幅怎样的地狱绘卷啊。

我想了下也没什么好的解决方案，谁知道用户会写多宽多长的 ASCII 图呢？
不撑满还能怎么办？统计 SVG 里面的最多一行字符数量也许可以？问题是怎么统计？
SVG 里的字符都是 font-size:1em 适应父容器尺寸的，现在想反过来确实也不好弄。

用例

不过这个功能还是非常赞的，巨幅增强了博客的内容表达能力。

之前提到过的「细长」流程图
┌│└┌│└─△│││││││││┴l───┌│└┌│└─o──┬│││▽t┬▽┬▽o────h────p──i──e───┐│┘─f──n──e──────n────B──d───┌│└┐│┘───┬▽t┬│││▽─┐│┘─h────e─┐│┘─n────A─┐│┘
OL_DF_KI_BO_OL_AN_UN_O_YE_TE_┌│└YW_,_S_─I─O_L_Y_┌│└──UC_YA_OL_─L──H─H_OB_UA_─I──A─UA__UE__B_─S──T─NR_│▽L_│▽SE_│▽T┬▽E─DT_n_SE_n_EL_n─E───ES_o_ED_o_EE_o─N──Y─R?__E__D_─.──O─S__'__T_┐│┘─U─T__TY__H'_┐│┘A__HE__EN_N__ES__O_D__'__'__?__?__y_e_y_y_s_e_e__s_s__┌│└__─W─__─A─__─I─__─T─__─,─__──__─W─__─H─__─A─__─T─__─?─__┐│┘___T__H_BF__E_UO___TL__AO_L__NN_YO__DE_OW__S_UE__Y_D__OL__J__UA_│▽UT_││└_B_n_SH_n─┌││└_CE_o_TE_o──(A─_AL__M_──T─┌│└_NE___──HQ──S─_D__T_──AU──C─_S__W_──TE──R─_E'__I_──S──E─_EN__C_┬▽WT┬▽W┬└_O__E_──AI────_'__?_──SO──I──┌││└_?_──NN──T───HI─_──')─┐│┘─┌│└─EN─__y──T───L──YS─__y_e─┐││┘┬│└─E──,T─__e_s────T──A─__s││││┘───'──IL─_┌│└───S──L─_─G──────SI─_─O────G──HN─_─O┬│││││││││││││││││┘┬▽O┬▽OG─_─D─────U─_┐│┘──D──LF─┌│└──R──DR──G───I──E──O───N──TE──O┬│││││││││││││││││││││││││┘─G──RB──D─┐│┘─YS──!──D─┐│┘─!─┐││┘

至于怎么画 ASCII 图，网上一堆转换工具。实在找不到可以用 Diagon。

横向的流程图就好多了
```goat
                                      .
   .---------.                       / \
  |   START   |                     /   \        .-+-------+-.      ___________
   '----+----'    .-------.    A   /     \   B   | |COMPLEX| |     /           \      .-.
        |        |   END   |<-----+CHOICE +----->| |       | +--->+ PREPARATION +--->| X |
        v         '-------'        \     /       | |PROCESS| |     \___________/      '-'
    .---------.                     \   /        '-+---+---+-'
   /  INPUT  /                       \ /
  '-----+---'                         '
        |                             ^
        v                             |
  .-----------.                 .-----+-----.        .-.
  |  PROCESS  +---------------->|  PROCESS  |<------+ X |
  '-----------'                 '-----------'        '-'
```
PSIRTNOAPCRUETTSSENDACPHROOICCEESSBCPORMOXPCLEESXSPREPARATIONX
```goat
┌───────────────────────────────┐             
│random                         │             
└┬─────────────┬─────────────┬─┬┘             
┌▽───────────┐┌▽────────────┐│┌▽─────────────┐
│distribution││seed_sequence│││nonsecure_base│
└┬───────────┘└┬───┬───────┬┘│└┬┬────────────┘
 │             │  ┌│───────│─│─│┘             
 │ ┌───────────┘  ││       │ │┌┘              
 │ │┌─────────────▽▽┐┌─────▽─▽▽┐              
 │ ││salted_seed_seq││pool_urbg│              
 │ │└┬──────────────┘└┬────────┘              
 │┌▽─▽────────────────▽┐                      
 ││seed_material       │                      
 │└┬───────────────────┘                      
┌▽─▽────┐                                     
│strings│                                     
└───────┘                                     
```
┌│└┌│└┌│└─r┬▽d┬││││││││▽s──a──i─┌│└─t──n──s─┌│││▽s┬▽r──d──t──┌│└─e──i──o──r───s┬▽e──n──m──i───a──d──g────b───l──_──s────u───t──m─┐│┘───t───e──a────i───d──t────o───_──e────n───s──r───┐│┘──e──i───┌│└──e──a──┬▽s┬│┘─d──l────e──_──────e──s──────d─┌│▽e──────_┬││▽q──────s──┐│┘─────e──┌│└─────q───p┬▽────u───o─┐│┘───e───o────n───l────c───_────e┬││▽u───┐│┘──r──┬│││││▽b───┌│└─┌▽g──┬▽n┬│┘┐│┘┐│┘─o┬┘─n──s──e──c──u──r──e──_──b──a──s──e─┐│┘
本文开头提到的重叠效果
```goat
           .-.           .-.           .-.           .-.           .-.           .-.
          |   |         |   |         |   |         |   |         |   |         |   |
       .---------.   .--+---+--.   .--+---+--.   .--|   |--.   .--+   +--.   .------|--.
      |           | |           | |   |   |   | |   |   |   | |           | |   |   |   |
       '---------'   '--+---+--'   '--+---+--'   '--|   |--'   '--+   +--'   '--|------'
          |   |         |   |         |   |         |   |         |   |         |   |
           '-'           '-'           '-'           '-'           '-'           '-'
```
序列图
```goat
┌─────┐       ┌───┐
│Alice│       │Bob│
└──┬──┘       └─┬─┘
   │            │  
   │ Hello Bob! │  
   │───────────>│  
   │            │  
   │Hello Alice!│  
   │<───────────│  
┌──┴──┐       ┌─┴─┐
│Alice│       │Bob│
└─────┘       └───┘
```
┌│└┌│└─A──A──l──l──i┬││││││┴i──c──H<─c──e─H─e──e─┐│┘e─l─┐│┘l─l─l─o─o───A─B─l─o─i─b─c─┌│└!─e─┌│└─B─>!──B──o┬││││││┴o──b──b─┐│┘┐│┘
```goat
 ┌────────┐            ┌───────┐     ┌───────┐
 │Renderer│            │Browser│     │Network│
 └───┬────┘            └───┬───┘     └───┬───┘
     │                     │             │    
     │  BeginNavigation()  │             │    
     │────────────────────>│             │    
     │                     │             │    
     │                     │URLRequest() │    
     │                     │────────────>│    
     │                     │             │    
     │                     │URLResponse()│    
     │                     │<────────────│    
     │                     │             │    
     │ CommitNavigation()  │             │    
     │<────────────────────│             │    
     │                     │             │    
     │DidCommitNavigation()│             │    
     │────────────────────>│             │    
 ┌───┴────┐            ┌───┴───┐     ┌───┴───┐
 │Renderer│            │Browser│     │Network│
 └────────┘            └───────┘     └───────┘
```
┌│└┌│└─R──R──e──e──n──n──d┬│││││││││││││││┴d──e──<D──e──r──C─i──r──e─B─o─d──e──r─e─m─C──r─┐│┘g─m─o─┐│┘i─i─m─n─t─m─N─N─i─a─a─t─v─v─N─i─i─a─g─g─v─a─a─i─t─t─g─i─i─a─o─o─t─n─n─i─┌│└(─(─o─┌│└─B─)─)─n──B──r───(──r──o─>─)>─o──w┬│││││││││││││││┴w──s─U─U<─s──e─R─R──e──r─L─L──r─┐│┘R─R─┐│┘e─e─q─s─u─p─e─o─s─n─┌│└t─s─┌│└─N─(─e──N──e─)─(──e──t─>)──t──w┬│││││││││││││││┴w──o──o──r──r──k──k─┐│┘┐│┘
文件树
```goat
Linux
 ├─Android
 ├─Debian
 │  ├─Ubuntu
 │  │  ├─Lubuntu
 │  │  ├─Kubuntu
 │  │  ├─Xubuntu
 │  │  └─Xubuntu
 │  └─Mint
 ├─Centos
 └─Fedora
```
Li├├││││││├└n────uADCFxne├││││└eedb──ndriUMtooab├├├└iorinu────nsadnLKXXttuuuuubbbbuuuunnnnttttuuuu
```goat
───Linux─┬─Android
         ├─Debian─┬─Ubuntu─┬─Lubuntu
         │        │        ├─Kubuntu
         │        │        ├─Xubuntu
         │        │        └─Xubuntu
         │        └─Mint
         ├─Centos
         └─Fedora
```
───Linux─┬├││││├└────ADCFneeedbndritooaorinsad─┬│││└──UMbiunnttu─┬├├└────LKXXuuuubbbbuuuunnnnttttuuuu
树
```goat
          .               .                .               .--- 1          .-- 1     / 1
         / \              |                |           .---+            .-+         +
        /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
       +     +        |       |        |       |    ---+            ---+          +
      / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
     /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
     1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4

```
123412341234123412341234
数学公式
```goat
             x  
f(x) = 1 + ─────
           1 + x
```
f(x)=1+─1─x─+──x
```goat
     _____________
    ╱        _____
   ╱        ╱    x
  ╱  1 +   ╱ 1 + ─
╲╱       ╲╱      2
```
1+1+x─2
```goat
                      ⎛    1⎞
                      ⎜1 + ─⎟
            2    3    ⎝    2⎠
f(x) = 1 + x  + x  + x       
```
f(x)=1+x2+x3+x⎛⎜⎝1+1─2⎞⎟⎠
```goat
S  = u  + u  + ... + u 
 n    1    2          n
```
Sn=u1+u2+un
```goat
  n                   
 ___        3    2    
 ╲     2   n    n    n
 ╱    i  = ── + ── + ─
 ‾‾‾        2    2   6
i = 0                 
```
i‾n‾=‾0i2=n─3─2+n─2─2+n─6
```goat
1            3
⌠  2        n 
⌡ x  ⋅ dx = ──
0            3
```
1⌠⌡0x2⋅dx=n─3─3
```goat
                    2    
  n        ⎛  n    ⎞     
━┳┳━   2   ⎜━┳┳━   ⎟     
 ┃┃   i  = ⎜ ┃┃   i⎟     
i = 1      ⎝i = 1  ⎠     
                         
                         
                         
 100                     
━┳━┳━ 1                  
 ┃ ┃  ─ = 7.8886091e - 31
 ┃ ┃  2                  
  1                      
```
━i━┳┃1┳┃┃n┳┃=0━1━0┳┃┃1━i1─22==7⎛⎜⎜⎝.━i8┳┃8n┳┃=8━6109i1⎞⎟⎟⎠e2-31
```goat
⎛a⎞   ⎛c⎞   ⎛a + c⎞
⎜ ⎟ + ⎜ ⎟ = ⎜     ⎟
⎝b⎠   ⎝d⎠   ⎝b + d⎠
```
⎛⎜⎝ab⎞⎟⎠+⎛⎜⎝cd⎞⎟⎠=⎛⎜⎝ab++cd⎞⎟⎠
```goat
⎛1 2⎞   ⎛x⎞   ⎛1 ⋅ x + 2 ⋅ y⎞
⎜   ⎟ ⋅ ⎜ ⎟ = ⎜             ⎟
⎝3 4⎠   ⎝y⎠   ⎝3 ⋅ x + 4 ⋅ y⎠
```
⎛⎜⎝1324⎞⎟⎠⋅⎛⎜⎝xy⎞⎟⎠=⎛⎜⎝13⋅⋅xx++24⋅⋅yy⎞⎟⎠
```goat
⎛n⎞        n!      
⎜ ⎟ = ─────────────
⎝k⎠   k! ⋅ (n - k)!
```
⎛⎜⎝nk⎞⎟⎠=─k─!──⋅─n─(!─n──-──k─)─!
```goat
                 1         
ψ = 1 + ───────────────────
                   1       
        1 + ───────────────
                     1     
            1 + ───────────
                       1   
                1 + ───────
                    1 + ...
```
ψ=1+─1──+───1────+─────11──────+─1──────1──1──────+───1─────────────
各种花样的箭头
```goat
    ^
    |
<---+--->
    |
    v
```

```goat
   o--o    *--o     /  /   *  o  o o o o   * * * *   o o o o   * * * *      o o o o   * * * *
   o--*    *--*    v  v   ^  ^   | | | |   | | | |    \ \ \ \   \ \ \ \    / / / /   / / / /
   o-->    *-->   *  o   /  /    o * v '   o * v '     o * v \   o * v \  o * v /   o * v /
   o---    *---
                                 ^ ^ ^ ^   . . . .   ^ ^ ^ ^   \ \ \ \      ^ ^ ^ ^   / / / /
   |  |   *  o  \  \   *  o      | | | |   | | | |    \ \ \ \   \ \ \ \    / / / /   / / / /
   v  v   ^  ^   v  v   ^  ^     o * v '   o * v '     o * v \   o * v \  o * v /   o * v /
   *  o   |  |    *  o   \  \

   <--o   <--*   <-->   <---      ---o   ---*   --->   ----      *<--   o<--   -->o   -->*
```
以及箭头的用法
```goat
   +-+         \     \  |  /     /
  +   +         \     v v v     /
   +-+           \ .---------. /     \ | /
                  v|         |v       vvv
   +-+         --->|         |<---  -->o<--
  |   |           ^|         |^       ^^^
   +-+           / '---------' \     / | \
                /     ^ ^ ^     \
               /     /  |  \     \
```

```goat
                ________                            o        *          *   .--------------.
   *---+--.    |        |     o   o      |         ^          \        /   |  .----------.  |
       |   |    '--*   -+-    |   |      v        /            \      /    | |  <------.  | |
       |    '----->       .---(---'  --->*<---   /      .+->*<--o----'     | |          | | |
   <--'  ^  ^             |   |                 |      | |  ^    \         |  '--------'  | |
          \/        *-----'   o     |<----->|   '-----'  |__|     v         '------------'  |
          /\                                                               *---------------'
```

```goat
                        A      1      2     4                        8
A         B         C   *----->o<---->o<----o-----------.            o
*-------->o<------->o                 ^     ^            |           ^
^        / ^        |                 |     |            |           |
|       v   \       v                 v     |            v           |
o----->o---->o<---->*                 o<--->*<---->o---->*---->o---->o<---->*
D      E     F      G                 3     B      5     C     6     7      D
```
ADEBFCGA1234B5C687D
几何图形
```goat
   .-.
  |   |
   '-'
```

```goat
                               .---.                                                 __    ..
  .--.     .  .-----.           \ /   .---.                    .---.    ___    ___  |  |   | )
 /    \   / \  \   /  .-.    .   ' .  |   |   .---. .---.     |     |  /   \  |   | '--'   ''
 \    /  /   \  \ /  |   |  / \   / \ '---'  /   /   \   \    |     |  \___/  |___|    ..  __
  '--'  '-----'  '    '-'  '---' /___\      '---'     '---'    '---'                  ( | |__|
                                                                                       ''
```

```goat
          .---------.   .   .-------.        .-------.   .---------.    .-----.      .----.
           \       /   / \   \       \      |         |  |         |   /       \    /      \
            \     /   /   \   \       \     |         |  |         |  /         \  |        |
             \   /   /     \   \       \    |         |  |         |  \         /  |        |
              \ /   /       \   \       \   |         |  |         |   \       /    \      /
               '   '---------'   '-------'   '-------'   '---------'    '-----'      '----'

```
箭头 + 图形就能画地图了
```goat
   .---.       .-.        .-.       .-.                                       .-.
   | A +----->| 1 +<---->| 2 |<----+ 4 +------------------.                  | 8 |
   '---'       '-'        '+'       '-'                    |                  '-'
                           |         ^                     |                   ^
                           v         |                     v                   |
                          .-.      .-+-.        .-.      .-+-.      .-.       .+.       .---.
                         | 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D |
                          '-'      '---'        '-'      '---'      '-'       '-'       '---'
```
A1234B5C687D
网格
```goat
 ┌─┬─┬─┬─┬─┐  ▉▉  ▉▉  ▉▉    ⬢ ⬡ ⬡     ┌┬┬┬┬┬┬┬┬┐  ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚   ___________    +-+-+-+-+
 ├─┼─┼─┼─┼─┤    ▉▉  ▉▉     ⬢ ⬢ ⬡ ⬡    ├┼┼┼┼┼┼┼┼┤  ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚  |__|__|__|__|   +-+-+-+-+
 ├─┼─┼─┼─┼─┤  ▉▉  ▉▉  ▉▉  ⬢ ⬢ ⬢ ⬡ ⬡   ├┼┼┼┼┼┼┼┼┤  ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚  |__|__|__|__|   +-+-+-+-+
 ├─┼─┼─┼─┼─┤    ▉▉  ▉▉     ⬡ ⬡ ⬡ ⬡    ├┼┼┼┼┼┼┼┼┤  ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚  |__|__|__|__|   +-+-+-+-+
 └─┴─┴─┴─┴─┘  ▉▉  ▉▉  ▉▉    ⬡ ⬡ ⬡     └┴┴┴┴┴┴┴┴┘  ⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚  |__|__|__|__|   +-+-+-+-+
```
┌├├├└─────┬┼┼┼┴─────┬┼┼┼┴─────┬┼┼┼┴─────┬┼┼┼┴─────┐┤┤┤┘⬢⬢⬡⬢⬢⬡⬢⬡⬡⬢⬡⬡⬡⬡⬡⬡⬡⬡⬡┌├├├└┬┼┼┼┴┬┼┼┼┴┬┼┼┼┴┬┼┼┼┴┬┼┼┼┴┬┼┼┼┴┬┼┼┼┴┬┼┼┼┴┐┤┤┤┘⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚⁚
```goat
       ___     ___      .---+---+---+---+---.     .---+---+---+---.  .---.   .---.
   ___/   \___/   \     |   |   |   |   |   |    / \ / \ / \ / \ /   |   +---+   |
  /   \___/   \___/     +---+---+---+---+---+   +---+---+---+---+    +---+   +---+
  \___/ b \___/   \     |   |   | b |   |   |    \ / \a/ \b/ \ / \   |   +---+   |
  / a \___/   \___/     +---+---+---+---+---+     +---+---+---+---+  +---+ b +---+
  \___/   \___/   \     |   | a |   |   |   |    / \ / \ / \ / \ /   | a +---+   |
      \___/   \___/     '---+---+---+---+---'   '---+---+---+---'    '---'   '---'
```
abababab
```goat
    .----.        .----.
   /      \      /      \            .-----+-----+-----.
  +        +----+        +----.      |     |     |     |          .-----+-----+-----+-----+
   \      /      \      /      \     |     |     |     |         /     /     /     /     /
    +----+   B    +----+        +    +-----+-----+-----+        +-----+-----+-----+-----+
   /      \      /      \      /     |     |     |     |       /     /     /     /     /
  +   A    +----+        +----+      |     |  B  |     |      +-----+-----+-----+-----+
   \      /      \      /      \     +-----+-----+-----+     /     /  A  /  B  /     /
    '----+        +----+        +    |     |     |     |    +-----+-----+-----+-----+
          \      /      \      /     |  A  |     |     |   /     /     /     /     /
           '----'        '----'      '-----+-----+-----'  '-----+-----+-----+-----+
```
ABABAB
点状网格（可以用来画棋谱哈哈）
```goat
  o o o o o  * * * * *  * * o o *    o o o      * * *      o o o     · * · · ·     · · ·
  o o o o o  * * * * *  o o o o *   o o o o    * * * *    * o * *    · * * · ·    · · · ·
  o o o o o  * * * * *  o * o o o  o o o o o  * * * * *  o o o o o   · o · · o   · · * * ·
  o o o o o  * * * * *  o * o o o   o o o o    * * * *    o * o o    · · · · o    · · * ·
  o o o o o  * * * * *  * * * * o    o o o      * * *      o * o     · · · · ·     · · *
```
··································
···································+·····+······························································································+·····+·····+······················································································+·····+································

不是五子棋 www，古李十番棋第 6 局古力（黑）vs 李世石（白）。

边角当然可以下。（代码没对齐是前端把 · 渲染成 2 倍字宽的全角点了）

```goat
o-----------------------------------*
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · + · · · · · + · · · · · + · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · + · · · · · + · · · · · + · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
| · · + · · · · · + · · · · · + · · |
| · · · · · · · · · · · · · · · · · |
| · · · · · · · · · · · · · · · · · |
+-----------------------------------+
```
····································+·····+·····+·························································································+·····+·····+·························································································+·····+·····+····································

甚至象棋你都可以硬画。

車砲馬士象士將
往里面填东西就是表格了
```goat
┌──────────┬────────┬────────┐
│Column 1  │Column 2│Column 3│
├──────────┼────────┼────────┤
│C++       │Web     │Assembly│
├──────────┼────────┼────────┤
│Javascript│CSS     │HTML    │
└──────────┴────────┴────────┘
```
┌│├│├│└─C─C─J──o─+─a──l─+─v──u──a──m──s──n──c────r──1──i────p────t─┬│┼│┼│┴─C─W─C──o─e─S──l─b─S──u────m────n────────2───┬│┼│┼│┴─C─A─H──o─s─T──l─s─M──u─e─L──m─m───n─b────l───3─y──┐│┤│┤│┘
图形学
```goat
                                                                             .
    0       3                          P *              Eye /         ^     /
     *-------*      +y                    \                +)          \   /  Reflection
  1 /|    2 /|       ^                     \                \           \ v
   *-------* |       |                v0    \       v3           --------*--------
   | |4    | |7      |                  *----\-----*
   | *-----|-*       +-----> +x        /      v X   \          .-.<--------        o
   |/      |/       /                 /        o     \        | / | Refraction    / \
   *-------*       v                 /                \        +-'               /   \
  5       6      +z              v1 *------------------* v2    |                o-----o
                                                               v
```
15042637+z+y+xv1vP0Xv3Eyve2RefractionReflection
数字电路
```goat
                                 ____                      *
                                |    |_____.---.           |
                                o     _____|    )----------)-------.
                               / \   |     '---'           |     __|__
                              /___\  |                     |     \   /
                                |    '-------------.       |      \ /
              A ----------------'                  |       |       o
                   .-------------------.     o-----)-------'       |
                   |                   |___.---.   |               |___.---.
              B ---*---.__.---.         ___|    )--*--.__..---.     ____)   )----- Y
                        __|    o----*--'   '---'    ______))   )---'   '---'
              C -------'  '---'     |              |     ''---'
                                    |              o
                                    |             / \
                                    |            /___\
                                    |              |
                                    '--------------'
```
ABCY

模拟电路目前未实现，Markdeep 官方是支持的。（详见 官网 的 示例）

复杂组合
```goat
+-------------------+                           ^                      .---.
|    A Box          |__.--.__    __.-->         |      .-.             |   |
|                   |        '--'               v     | * |<---        |   |
+-------------------+                                  '-'             |   |
                       Round                                       *---(-. |
  .-----------------.  .-------.    .----------.         .-------.     | | |
 |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
 | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
 '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
    |            |   |    | '---.        |               '-------'       |       '-+------'
    |<---------->|   |    |      |       v                Interior                 |     ^
    '           <---'      '----'   .-----------.              ---.     .---       v     |
 .------------------.  Diag line    | .-------. +---.              \   /           .     |
 |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
 |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
 '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
 <--+---+-----'       |     /|\                                                    |  | 3 |
                      v                             not:line    'quotes'        .-'   '---'
  .-.             .---+--------.            /            A || B   *bold*       |        ^
 |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
  '-'             '---------+--'          /           Nor/is this.            ---
```
&AMSioiqfbBxujoea(-xdra>efR>coCnuob(nr))dneeJdrosinNoRDtoiuaangddloitneDiagonalsCVuerrvteidcalnotANC:ouldrriAa/Ivnsineehstd-e-trlBihiision'sreqn.u*oobttoelasd'*lineDonSee?arc3h
实际图像（想画什么画什么）
```goat
                                      .-.                           .--------.
                                   .-+   |                         |          |
                               .--+       '--.                     |'--------'|
                              |  Server Cloud |<------------------>| Database |
                               '-------------'                     |          |
                                   ^      ^                         '--------'
                    Internet       |      |                              ^
          .------------------------'      '-------------.                |
          |                                             |                v
          v                                             v              .------.       .------.
     .--------.      WiFi     .--------.  Bluetooth  .-----.          / #  # /|      / #  # /|
     |        |<------------->|        |<---------->|       |        +------+/| LAN +------+/|
     |Windows |               |  OS X  |            |  iOS  |        |      +/|<--->|      +/|
     +--------+               +--------+            |       |        |Ubuntu+/|     |Ubuntu+/|
    /// ____ \\\             /// ____ \\\           |   o   |        |      +/      |      +/
   '------------'           '------------'           '-----'         '------'       '------'
      Laptop 1                 Laptop 2              Tablet 1         Dedicated Server Rack
```
WLianpdtoowps1InWtieFrinetLaSOpeStrovXper2CloBulduetoothTaibOlSet1DaUDtbea#udbniatcs#uaetedLSAeNrveUrb#uRnatc#uk
支持希腊字母
```goat
Α + α + Ϝ + ϝ + Κ + ϰ + Ο                
ο + Υ + υ + Β + β + Ζ + ζ + Λ            
λ + Π + π + ϕ + φ + Γ + γ + Η + η + Μ + μ
ρ + ϱ + Χ + χ + Δ + δ + θ + ϑ + Ν + ν    
σ + ς + Ψ + ψ + ϵ + ε + Ι + ι + Ξ        
ξ + Τ + τ + Ω + ω                        
```
Αολρσξ++++++αΥΠϱςΤ++++++ϜυπΧΨτ++++++ϝΒϕχψΩ++++++ΚβφΔϵω+++++ϰΖΓδε+++++ΟζγθΙ++++ΛΗϑι+++ηΝΞ++Μν+μ
支持 Unicode 字符集
```goat
                           ↖ ↗   ✶ ✹ ✩ ⓵             ⎲                ░░▒▒▓▓▉▉ ▚▚  ▢ ▢ ⬚ ⬚ ⊕
 ▲       ◀━━━━━━━▶         ↙ ↘   ➊ ❶ ➀ ①   ➕ ➖ ➗ ❌   ⎳       ╲   ╱             ▚▚  ▢ ▢ ⬚ ⬚ ⊖
 ┃  ╭╌╌╌╌╌╌╌╮    ╔═══════╗    ┏━━━━━━━┓    ┏╍╍╍╍╍╍╍┓          ╲ ╱     ░░▒▒▓▓▉▉ ▚▚  ⬣ ⬣ ⎔ ⎔ ⊗
 ┃  ╎       ╎    ║       ║    ┃       ┃    ╏       ╏  ⎛  ⎧  ⎡  ╳      ░░▒▒▓▓▉▉ ▚▚  ⬣ ⬣ ⎔ ⎔ ⊘
 ┃  ╎       ╎    ║       ║    ┃       ┃    ╏       ╏⋮ ⎜  ⎨  ⎢ ╱ ╲     ░░▒▒▓▓▉▉ ▚▚  ◯ ◯ ⏣ ⏣ ⊙
 ▼  ╰╌╌╌╌╌╌╌╯    ╚═══════╝    ┗━━━━━━━┛ ⋱  ┗╍╍╍╍╍╍╍┛⋮ ⎝  ⎩  ⎣╱   ╲    ░░▒▒▓▓▉▉ ▚▚  ◯ ◯ ⏣ ⏣ ⊛
                                          ⋱         ⋮                   ◢▉▉◣               ⊜
   ∑xᵢ             ∫t²dt                    ⋱       ⋮                   ◥▉▉◤
```
▲┃┃┃▼∑╭╎╎╰x╌╌ᵢ╌╌╌╌╌╌◀╌╌━╌╌━╌╌━╮╎╎╯━━━━▶╔║║╚════∫══t══²══d══t══╗║║╝↖↙↗↘┏┃┃┗━━━━✶➊━━━━✹❶━━━━✩➀━━┓┃┃┛⓵①⋱⋱➕┏╏╏┗╍╍⋱➖╍╍╍╍➗╍╍╍╍❌╍╍╍╍┓╏╏┛⋮⋮⋮⋮⎲⎳⎛⎜⎝⎧⎨⎩⎡⎢⎣◢◥◣◤▚▚▚▚▚▚▚▚▚▚▚▚▢▢⬣⬣◯◯▢▢⬣⬣◯◯⬚⬚⎔⎔⏣⏣⬚⬚⎔⎔⏣⏣⊕⊖⊗⊘⊙⊛⊜

替代方案 Mermaid

你也可以选择经典的 mermaid-js/mermaid 来画流程图。

当然更好的选择是哪个合适就用哪个，因地制宜。

小朋友才喜欢站队玩什么踩一捧一，大人当然是「不管黑猫白猫，能干的就是好猫」。
有奶就是娘？妈的，人家愿意给你喂奶你不感恩，难道反而要恨上人家吗？

将 mermaid.js 引入 Hugo

新建文件 layouts/_default/_markup/render-codeblock-mermaid.html：

1
2
3
4

<div class="mermaid">
  {{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}

新建文件 layouts\partials\custom\script.html *：

* 你用的 Hugo 主题很可能已经有这个文件了，自定义的 layouts 会 覆盖 （Overirde）主题的同名文件。
因此（如果确实有的话）记得把主题的那个文件里面的内容也复制到外面这个文件。

1
2
3
4
5
6

{{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

然后正文正常写 mermaid.js 格式的代码就行了。

有些博客主题已经自带 Mermaid 了，不过它们的实现也许需要 Front Matter 加 mermaid: true 来手动引入 JS。
但上述方法是不需要手动修改 Front Matter 的，而是通过读写 .Page.Store 来动态检查文章是否包含 mermaid 代码块，有就自动引入 JS（即按需引入），简单便捷。

```mermaid
graph TD;
    A ---|"不带箭头"| B;
    A -->|"带箭头"| C;
    B ==>|"粗线"| D;
    C -.->|"虚线"| D;
```
graph TD; A ---|"不带箭头"| B; A -->|"带箭头"| C; B ==>|"粗线"| D; C -.->|"虚线"| D;

用例

run 了，有空再写。

updatedupdated2022-10-252022-10-25

相关文章：