HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
Star

What's on this Page

  • GoAT Diagrams (Ascii)
  • Mermaid Diagrams
  • Goat Ascii Diagram Examples
CONTENT MANAGEMENT

Diagrams

Use fenced code blocks and markdown render hooks to display diagrams.

GoAT Diagrams (Ascii)

Hugo supports GoAT natively. 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 currently does not provide default templates for Mermaid diagrams. But you can easily add your own. One way to do it would be to create layouts/_default/_markup/render-codeblock-mermaid.html:

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

And then include this snippet at the bottom of the content template (Note: below .Content as the render hook is not processed until .Content is executed):

{{ if .Page.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────"─────────────.─────────}────"──────────────────────"────.─────────"─────────────"─────────────"──────────────────────────.─┐│┤│┤│┤│┤│┤│┤│┤│┤│┤│┤│┤│┘
  • About Hugo
    • Overview
    • Hugo's Security Model
    • Hugo and GDPR
    • What is Hugo
    • Hugo Features
    • The Benefits of Static
    • License
  • Installation
    • Installation overview
    • macOS
    • Linux
    • Windows
    • BSD
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Basic usage
    • Directory Structure
    • Configuration
    • External Learning Resources
  • Hugo Modules
    • Hugo Modules Overview
    • Configure Modules
    • Use Hugo Modules
    • Theme Components
  • Content Management
    • Content Management Overview
    • Organization
    • Page Bundles
    • Content Formats
    • Diagrams
    • Front Matter
    • Build Options
    • Page Resources
    • Image Processing
    • Shortcodes
    • Related Content
    • Sections
    • Content Types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and Cross References
    • URL Management
    • Menus
    • Static Files
    • Table of Contents
    • Comments
    • Multilingual
    • Syntax Highlighting
  • Templates
    • Templates Overview
    • Templating
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • Render Hooks
    • List Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Templates
    • Robots.txt
    • Internal Templates
    • Template Debugging
  • Functions
    • Functions Quick Reference
    • .AddDate
    • .Format
    • .Get
    • .GetPage
    • .HasMenuCurrent
    • .IsMenuCurrent
    • .Param
    • .Render
    • .RenderString
    • .Scratch
    • .Store
    • .Unix
    • absLangURL
    • absURL
    • after
    • anchorize
    • append
    • apply
    • base64
    • chomp
    • complement
    • cond
    • countrunes
    • countwords
    • crypto.FNV32a
    • default
    • delimit
    • dict
    • duration
    • echoParam
    • emojify
    • eq
    • errorf and warnf
    • fileExists
    • findRE
    • first
    • float
    • ge
    • getenv
    • group
    • gt
    • hasPrefix
    • highlight
    • hmac
    • htmlEscape
    • htmlUnescape
    • hugo
    • humanize
    • i18n
    • Image Filters
    • in
    • index
    • int
    • intersect
    • isset
    • jsonify
    • lang
    • lang.Merge
    • last
    • le
    • len
    • lower
    • lt
    • markdownify
    • Math
    • md5
    • merge
    • ne
    • now
    • os.Stat
    • partialCached
    • path.Base
    • path.BaseName
    • path.Clean
    • path.Dir
    • path.Ext
    • path.Join
    • path.Split
    • plainify
    • pluralize
    • print
    • printf
    • println
    • querify
    • range
    • readDir
    • readFile
    • ref
    • reflect.IsMap
    • reflect.IsSlice
    • relLangURL
    • relref
    • relURL
    • replace
    • replaceRE
    • safeCSS
    • safeHTML
    • safeHTMLAttr
    • safeJS
    • safeURL
    • seq
    • sha
    • shuffle
    • singularize
    • site
    • slice
    • slicestr
    • sort
    • split
    • string
    • strings.Contains
    • strings.ContainsAny
    • strings.Count
    • strings.FirstUpper
    • strings.HasSuffix
    • strings.Repeat
    • strings.RuneCount
    • strings.TrimLeft
    • strings.TrimPrefix
    • strings.TrimRight
    • strings.TrimSuffix
    • substr
    • symdiff
    • templates.Exists
    • time
    • time.Format
    • time.ParseDuration
    • title
    • transform.Unmarshal
    • trim
    • truncate
    • union
    • uniq
    • upper
    • urlize
    • urlquery
    • urls.Parse
    • where
    • with
  • Variables
    • Variables Overview
    • Site Variables
    • Page Variables
    • Shortcode Variables
    • Pages Methods
    • Taxonomy Variables
    • File Variables
    • Menu Variables
    • Git Variables
    • Sitemap Variables
  • Hugo Pipes
    • Hugo Pipes Overview
    • Hugo Pipes
    • Sass / SCSS
    • PostProcess
    • PostCSS
    • JavaScript Building
    • Babel
    • Asset minification
    • Asset bundling
    • Fingerprinting and SRI
    • Resource from Template
    • Resource from String
  • CLI
  • Troubleshooting
    • Troubleshoot
    • FAQ
    • Build Performance
  • Tools
    • Developer Tools Overview
    • Migrations
    • Starter Kits
    • Frontends
    • Editor Plug-ins
    • Search
    • Other Projects
  • Hosting & Deployment
    • Hosting & Deployment Overview
    • Hugo Deploy
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Netlify
    • Host on Render
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Host on KeyCDN
    • Host on Cloudflare Pages
    • Deployment with Rsync
    • Deployment with Rclone
    • Hosting on Azure Static Web Apps
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
  • Maintenance
Last updated: March 17, 2023: Clarify mermaid markdown example (#2004) (90c82d7e)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 

Hugo Sponsors

 

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

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

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Installation
  • Getting Started
  • Hugo Modules
  • Content Management
  • Templates
  • Functions
  • Variables
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute
  • Maintenance