HugoのGoATについてのちょっとしたこと

テキスト上の表記が描画内容とかなり近い記法 GoAT

これについて、メリット・デメリットと対処方法を書いておきます。

GoAT

GoAT は、↓に引用した Hugo 公式の説明にもありますが、外部依存せずに図を記述する方法です。

Hugo natively supports GoAT diagrams with an embedded code block render hook.

https://gohugo.io/content-management/diagrams/ ☐↗

もちろん、Mermaid にしかできない図もあるので、使い分けをすることになるのですが。

メリット

Markdown上の表記が描画内容とかなり近い

GoATの例 ☐↗ を見てもらうと分かりやすいのですが、枠囲みや罫線、矢印といった表記がほぼそのまま描画されます。

使える文字さえ覚えてしまえば、「こういうのを描きたい」というのを素直に図に落とし込めます。

改行も含められる

```goat {height="5em"}
.-----.
| aaa |
|  bb |
|   c |
.-----.
``` 

デメリット

単純な図が拡大される

Hugo のテーマ側 (スタイルシート) で工夫する余地もありそうな気はしますが。

試しに「aaa」を枠で囲んでみます。

```goat
.-----.
| aaa |
.-----.
``` 

で、でかい…

多少面倒ではありますが、Markdown attributes ☐↗ を使って幅や高さを指定することで意図したサイズにすることは可能です。

```goat {height="3em"}
.-----.
| aaa |
.-----.
``` 

全角文字が不格好

試しに「あああ」を枠で囲んでみます。

```goat {height="3em"}
.--------.
| あああ |
.--------.
``` 

それぞれの文字が重なっているし、罫線もずれています。

こちらも一応、迂回方法はあります。 全角文字それぞれの後に半角スペースを挟むことで回避可能です。

```goat {height="3em"}
.-------.
| あ あ あ |
.-------.
```

記述例の横罫線が短いですが、ハイフンの数は対応する文字の数に合わせる必要があります。(文字の幅ではなくて)

ためしに、記述としては「あ あ あ 」にそろえるようにすると、今度は描画結果が崩れます。

```goat {height="3em"}
.----------.
| あ あ あ |
.----------.
```

あらら…

ここまでの内容をまとめると、以下のようになります。

• 全角文字の後ろには、1文字ごとに半角スペースを入れる
• 罫線は文字数と合わせる

Markdown としての汎用性はあまりない

Mermaid をサポートしている Markdown プラットフォーム (Hugo とかObsidian とか) は多く、ビルトインされていたりプラグインで対応できたりします。

対して GoAT は大分マイナーだと思います。(いやまあ、調べたりはしていないのですが、私は前の記事を書く時に GoAT を初めて知った)