HUGO ja 非公式

  • ニュース
  • ドキュメント
  • テーマ
  • コミュニティ
  • GitHub
gohugoio Star づけ
  暫定公開中 2024/09/16 (94d7f576a 対応, 2024/09/15)
  • Hugo について
    • 本節
    • Introduction
    • Hugo の機能
    • Privacy
    • セキュリティ
    • ライセンス
  • インストール
    • 本節
    • macOS
    • Linux
    • Windows
    • BSD
  • はじめよう
    • 本節
    • クイックスタート
    • ディレクトリ構造
    • 基本操作
    • 設定
    • Configure markup
    • 用語集
    • 本書以外の学習リソース
  • クイックリファレンス
    • 本節
    • Emojis
    • Functions
    • Methods
    • Page collections
  • コンテント管理
    • 本節
    • コンテントの構成
    • ページバンドル
    • コンテントフォーマット
    • フロントマター
    • ビルドオプション
    • ページリソース
    • イメージ処理
    • ショートコード
    • 関連コンテント
    • Sections
    • Content types
    • アーキタイプ
    • 分類
    • Summaries
    • Links and cross references
    • URL 管理
    • メニュー
    • コメント
    • マルチ言語
    • Markdown attributes
    • シンタックスハイライト
    • Diagrams
    • Mathematics
    • Data sources
    • Content adapters
  • テンプレート
    • 本節
    • はじめに
    • Template types
    • Lookup order
    • 基本テンプレート
    • Home templates
    • Single templates
    • Section templates
    • Taxonomy templates
    • Term templates
    • 部分テンプレート
    • コンテントビューテンプレート
    • ショートコードテンプレート
    • サイトマップテンプレート
    • RSS テンプレート
    • 404 テンプレート
    • robots.txt templates
    • メニュー
    • ページネーション
    • Embedded templates
    • Custom output formats
  • 関数
    • 本節
    • cast
    • collections
    • compare
    • crypto
    • css
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go template
    • hash
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • メソッド
    • 本節
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pager
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • レンダーフック
    • 本節
    • Introduction
    • Blockquotes
    • Code blocks
    • Headings
    • Images
    • Links
    • Passthrough
    • Tables
  • Hugo モジュール
    • In this section
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Hugo パイプ
    • 本節
    • Introduction
    • Transpile Sass to CSS
    • PostCSS
    • PostProcess
    • JavaScript building
    • Babel
    • Asset minification
    • Concatenating assets
    • Fingerprinting and SRI hashing
    • Resource from string
    • Resource from template
  • CLI
  • トラブルシューティング
    • 本節
    • Logging
    • Inspection
    • Deprecation
    • Performance
    • FAQs
  • 開発ツール
    • 本節
    • Editor plugins
    • Front-ends
    • 検索
    • Migrations
    • Other projects
  • ホスティングと開発
    • 本節
    • Hugo Deploy
    • Deploy with Rclone
    • Deploy with Rsync
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Cloudflare Pages
    • Host on Firebase
    • Host on GitHub Pages
    • Host on GitLab Pages
    • Host on KeyCDN
    • Host on Netlify
    • Host on Render
  • 貢献
    • 本節
    • Development
    • ドキュメント
    • Themes
  • メンテナンス
コンテント管理

Diagrams

Use fenced code blocks and Markdown render hooks to include diagrams in your content.

GoAT diagrams (ASCII)

Hugo natively supports GoAT diagrams with an embedded code block render hook. This means that this code block:

```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

```

Will be rendered as:

123412341234123412341234

Mermaid diagrams

Hugo does not provide a built-in template for Mermaid diagrams. Create your own using a code block render hook:

layouts/_default/_markup/render-codeblock-mermaid.html
<pre class="mermaid">
  {{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

And then include this snippet at the bottom of the content template:

{{ if .Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

With that you can use the mermaid language in Markdown code blocks:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

Goat ASCII diagram examples

Graphics

15042637+z+y+xv1vP0Xv3Eyve2RefractionReflection

Complex

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

Process

PSIRTNOAPCRUETTSSENDACPHROOICCEESSBCPORMOXPCLEESXSPREPARATIONX

File tree

Created from https://arthursonzogni.com/Diagon/#Tree

───Linux─┬├││││├└────ADCFneeedbndritooaorinsad─┬│││└──UMbiunnttu─┬├├└────LKXXuuuubbbbuuuunnnnttttuuuu

Sequence diagram

https://arthursonzogni.com/Diagon/#Sequence

┌│└┌│└─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─┐│┘┐│┘

Flowchart

https://arthursonzogni.com/Diagon/#Flowchart

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─┐│┘─!─┐││┘

Table

https://arthursonzogni.com/Diagon/#Table

┌│├│├│├│├│├│├│├│├│├│├│├│└──S─P─E─T─F─────I─L───Y─R─X─E─A─────D─I───N─O─P─R─C─────E─T───T─D─R─M─T─────N─E───A─U─E──O─────T─R───X─C─S──R─────I─A────T─S───────F─L────I─I───────I─────O─O───────E─────N─N───────R─────────|─|─|─|─────=─=─=─=─=─────=─=────────L─"─"─"─────{─I─T─F─I─I─[─(─{─l─"────D─E─A─D─T─"─"─"─e─"───P─E─R─C─E─E────t─"───R─N─M─T─N─R─E─E─E─t─"───O─T──O─T─A─X─X─X─e────D─I─{─R─I─L─P─P─P─r─c───U─F───F──R─R─R──h───C─I─"─{─I──E─E─E─{─a───T─E─|──E──S─S─S──r───I─R─"─F─R──S─S─S─l─a───O───A───I─I─I─e─c───N─"─T─C───O─O─O─t─t────=─E─T───N─N─N─t─e───}─"─R─O──────e─r─────M─R───"─"─"─r────.─E─────]─)─}──{────X─}─}───"─"─"─}─────P─────────c────R─.─.─────.─.─h────E─────────a────S─────────r────S─────────a────I─────────c────O─────────t────N─────────e─────────────r────"─────────────.─────────}────"──────────────────────"────.─────────"─────────────"─────────────"──────────────────────────.─┐│┤│┤│┤│┤│┤│┤│┤│┤│┤│┤│┤│┘

関連項目

  • イメージ処理

このページ内

  • GoAT diagrams (ASCII)
  • Mermaid diagrams
  • Goat ASCII diagram examples
最終更新日付: 0001/01/01
ページの変更
Hugo 作者より
Hugo Logo
  • Issue 報告
  • ヘルプ
  • @GoHugoIO
  • @spf13
  • @bepsays
 

Hugo Sponsors

Route4Me
Your Company?
 

The Hugo logos are copyright © Steve Francia 2013–2024.

The Hugo Gopher is based on an original work by Renée French.

  • ニュース
  • ドキュメント
  • テーマ
  • コミュニティ
  • GitHub
  • Hugo について
  • インストール
  • はじめよう
  • クイックリファレンス
  • コンテント管理
  • テンプレート
  • 関数
  • メソッド
  • レンダーフック
  • Hugo モジュール
  • Hugo パイプ
  • CLI
  • トラブルシューティング
  • 開発ツール
  • ホスティングと開発
  • 貢献
  • メンテナンス