Hugo 博客使用 ASCII 码渲染图表

GoAT 尝鲜

GoAT(Go ASCII Tool)

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

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

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

很炫酷吧?

注意 goat 必须是小写。别的语言标记是忽略大小写的,比如 Pythonpython 都能正常识别。
但这个新功能解析的时候并没有特意处理大小写,是区分大小写的。```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

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

自动撑满宽度简直是灾难
RReennddeM<MM<M<M<M<M<M<MereeeeeeeeeresssssssssersssssssssraaaaaaaaagggggggggBeeeeeeeeeBrro21>3456789>owwsseerr

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

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

用例

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

之前提到过的「细长」流程图
lotohpiefnenBdthenA
OL_DF_KI_BO_OL_AN_UN_O_YE_TE_YW_,_S_IO_L_Y_UC_YA_OL_LHH_OB_UA_IAUA__UE__B_STNR_L_SE_TEDT_n_SE_n_EL_nEES_o_ED_o_EE_oNYR?__E__D_.OS__'__T_UT__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___HQS_D__T_AUC_S__W_TER_E'__I_SE_EN__C_WTW_O__E_AI_'__?_SOI_?_NNTHI_')EN__yTLYS__y_eE,T__e_sTA__s'IL_SL_GSI_OGHN_OOOG_DU_DLFRDRGIEONTEOGRBDYS!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│                                     
└───────┘                                     
```
rdsaitnssrdteiorsenmiadgbl_sutmteaidto_ensreieasdle_esde_qseqpuoeonlc_eurbgnonsecure_base
本文开头提到的重叠效果
```goat
           .-.           .-.           .-.           .-.           .-.           .-.
          |   |         |   |         |   |         |   |         |   |         |   |
       .---------.   .--+---+--.   .--+---+--.   .--|   |--.   .--+   +--.   .------|--.
      |           | |           | |   |   |   | |   |   |   | |           | |   |   |   |
       '---------'   '--+---+--'   '--+---+--'   '--|   |--'   '--+   +--'   '--|------'
          |   |         |   |         |   |         |   |         |   |         |   |
           '-'           '-'           '-'           '-'           '-'           '-'
```
序列图
```goat
┌─────┐       ┌───┐
│Alice│       │Bob│
└──┬──┘       └─┬─┘
   │            │  
   │ Hello Bob! │  
   │───────────>│  
   │            │  
   │Hello Alice!│  
   │<───────────│  
┌──┴──┐       ┌─┴─┐
│Alice│       │Bob│
└─────┘       └───┘
```
AAlliicH<ceHeeellllooABloibc!eB>!Boobb
```goat
 ┌────────┐            ┌───────┐     ┌───────┐
 │Renderer│            │Browser│     │Network│
 └───┬────┘            └───┬───┘     └───┬───┘
     │                     │             │    
     │  BeginNavigation()  │             │    
     │────────────────────>│             │    
     │                     │             │    
     │                     │URLRequest() │    
     │                     │────────────>│    
     │                     │             │    
     │                     │URLResponse()│    
     │                     │<────────────│    
     │                     │             │    
     │ CommitNavigation()  │             │    
     │<────────────────────│             │    
     │                     │             │    
     │DidCommitNavigation()│             │    
     │────────────────────>│             │    
 ┌───┴────┐            ┌───┴───┐     ┌───┴───┐
 │Renderer│            │Browser│     │Network│
 └────────┘            └───────┘     └───────┘
```
RReenndde<DerCireBoderemCrgmoiimntmNNiaatvvNiiaggvaaittgiiaootnni((oB))nBr(ro>)>owwsUU<seRRerLLrRReeqsupeosntsN(eNe)(et>)twwoorrkk
文件树
```goat
Linux
 ├─Android
 ├─Debian
 │  ├─Ubuntu
 │  │  ├─Lubuntu
 │  │  ├─Kubuntu
 │  │  ├─Xubuntu
 │  │  └─Xubuntu
 │  └─Mint
 ├─Centos
 └─Fedora
```
LinuADCFxneeedbndriUMtooabiorinunsadnLKXXttuuuuubbbbuuuunnnnttttuuuu
```goat
───Linux─┬─Android
         ├─Debian─┬─Ubuntu─┬─Lubuntu
         │        │        ├─Kubuntu
         │        │        ├─Xubuntu
         │        │        └─Xubuntu
         │        └─Mint
         ├─Centos
         └─Fedora
```
LinuxADCFneeedbndritooaorinsadUMbiunnttuLKXXuuuubbbbuuuunnnnttttuuuu
```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+1x+x
```goat
     _____________
    ╱        _____
   ╱        ╱    x
  ╱  1 +   ╱ 1 + ─
╲╱       ╲╱      2
```
1+1+x2
```goat
                      ⎛    1⎞
                      ⎜1 + ─⎟
            2    3    ⎝    2⎠
f(x) = 1 + x  + x  + x       
```
f(x)=1+x2+x3+x1+12
```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                 
```
in=0i2=n32+n22+n6
```goat
1            3
⌠  2        n 
⌡ x  ⋅ dx = ──
0            3
```
10x2dx=n33
```goat
                    2    
  n        ⎛  n    ⎞     
━┳┳━   2   ⎜━┳┳━   ⎟     
 ┃┃   i  = ⎜ ┃┃   i⎟     
i = 1      ⎝i = 1  ⎠     
                         
                         
                         
 100                     
━┳━┳━ 1                  
 ┃ ┃  ─ = 7.8886091e - 31
 ┃ ┃  2                  
  1                      
```
i1n=0101i122==7.i88n=86109i1e2-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⎠
```
1324xy=13xx++24yy
```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+111+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    │
└──────────┴────────┴────────┘
```
CCJo+al+vuamsncr1iptCWCoeSlbSumn2CAHosTlsMueLmmnbl3y
图形学
```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                    ⋱       ⋮                   ◥▉▉◤
```
xt²dt

替代方案 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 }}

然后博客文章 Front Matter 加上 mermaid: true。正文正常写 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-05-012022-05-01