[{"content":"About\nEach tile in this image is drawn by the same short algorithm, seeded once and run independently per cell. There are no external dependencies — just Python\u0026rsquo;s built-in random module and string formatting.\nFourfold symmetry. Every tile is divided into four quadrants. The algorithm draws a set of line segments into one quadrant, then rotates that group by 90°, 180°, and 270° around the tile centre to fill the rest. This guarantees the final pattern has four-way rotational symmetry regardless of what the random lines look like.\nLines in a triangle. Within each quadrant, lines are placed on an even sub-grid (sections × sections squares). Starting points are constrained to the lower-right triangle (y ≤ x), which stops the four rotations from overlapping at the diagonal. Each line also gets a mirror copy reflected across the quadrant\u0026rsquo;s main diagonal, doubling the density without extra sampling.\npos (gradient direction). Lines either run up-right (positive slope) or down-right (negative slope). The pos flag is True only at specific interior grid positions — a deliberate quirk from the original that gives the pattern its mix of crossing angles rather than all lines running the same way.\nFixed seed, stable output. generate(seed=42) produces the same image on every build. Pass --seed N on the command line to explore variants.\nGenerator\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 # /// script # requires-python = \u0026#34;\u0026gt;=3.11\u0026#34; # dependencies = [] # /// import sys import random def draw_line( x, y, length, pos, size, top_left_x, top_left_y, sw, sym=False, color=\u0026#34;rosybrown\u0026#34;, ): \u0026#34;\u0026#34;\u0026#34;Return the SVG XML for a single line segment. x, y — grid coordinates of the starting point length — number of grid squares to span pos — True for positive gradient (up-right), False for down-right size — pixel size of one grid square top_left_x/y — pixel origin of the tile sw — stroke width sym — True for the diagonal mirror copy of a line color — stroke colour \u0026#34;\u0026#34;\u0026#34; # mirror: negate length so the reflected line runs the other direction if sym: length = -length x2 = x + length y2 = y - length if pos else y + length # clamp endpoints that overshoot the tile edge back to the boundary if x2 \u0026lt; 0: y2 += x2 x2 = 0 if y2 \u0026lt; 0: x2 += y2 y2 = 0 # swap coords: mirrored+positive case lands in the right quadrant if sym and pos: x2, y2 = y2, x2 return ( f\u0026#39;\u0026lt;line x1=\u0026#34;{top_left_x + x * size}\u0026#34; y1=\u0026#34;{top_left_y + y * size}\u0026#34;\u0026#39; f\u0026#39; x2=\u0026#34;{top_left_x + x2 * size}\u0026#34; y2=\u0026#34;{top_left_y + y2 * size}\u0026#34;\u0026#39; f\u0026#39; stroke-linecap=\u0026#34;square\u0026#34; stroke-width=\u0026#34;{sw}\u0026#34; stroke=\u0026#34;{color}\u0026#34; /\u0026gt;\u0026#39; ) def create_lines(sections, rng): # Pick a random number of line segments to draw in one quadrant of the tile. # Lines live in the lower-right diagonal half of the bottom-right quadrant; # the fourfold rotation then fills the rest of the tile. num_lines = rng.randint(sections // 2, int(sections * 1.5)) point_set = set() lines = [] # keep sampling until we have enough unique starting points while len(lines) \u0026lt; num_lines: # even grid coordinates only, so lines snap to the quadrant\u0026#39;s sub-grid x = rng.randint(0, sections // 2 - 1) * 2 # y ≤ x: keeps us in the lower-right triangle y = rng.randint(0, x // 2) * 2 # maximum span before the line exits the tile top = sections - x - y if x == y and x == 2 else sections - x length = rng.randint(1, top) # positive gradient only at specific interior grid positions pos = x in (2, 4) and y in (2, 4) if (x, y) not in point_set: lines.append((x, y, length, pos)) point_set.add((x, y)) return lines def make_tiles(sections, x_tiles, y_tiles, tile_size, rng, sw=2): # sections — sub-grid divisions per quadrant (controls intricacy) # x_tiles/y_tiles — number of tiles across and down # tile_size — pixels per tile (tiles are square) # sw — stroke width width = x_tiles * tile_size height = y_tiles * tile_size square_size = tile_size / sections / 2 # pixel size of one sub-grid square parts = [ f\u0026#39;\u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34;\u0026#39; f\u0026#39; viewBox=\u0026#34;0 0 {width} {height}\u0026#34; width=\u0026#34;{width}\u0026#34; height=\u0026#34;{height}\u0026#34;\u0026gt;\\n\u0026#39;, f\u0026#39;\u0026lt;rect width=\u0026#34;{width}\u0026#34; height=\u0026#34;{height}\u0026#34; fill=\u0026#34;#111\u0026#34; /\u0026gt;\\n\u0026#39;, ] for row in range(y_tiles): for col in range(x_tiles): top_left_x = col * tile_size top_left_y = row * tile_size cx = top_left_x + tile_size / 2 # rotation centre of this tile cy = top_left_y + tile_size / 2 # build one quadrant\u0026#39;s lines, then rotate into all four group = \u0026#34;\u0026#34; for x, y, length, pos in create_lines(sections, rng): group += ( draw_line( x, y, length, pos, square_size, top_left_x, top_left_y, sw, ) + \u0026#34;\\n\u0026#34; ) # mirror across the diagonal to fill the other half if x != y or pos: group += ( draw_line( y, x, -length, pos, square_size, top_left_x, top_left_y, sw, sym=True, ) + \u0026#34;\\n\u0026#34; ) # repeat this quadrant pattern at 0°, 90°, 180°, 270° for quad in range(4): rot = f\u0026#34;rotate({quad * 90} {cx} {cy})\u0026#34; parts.append(f\u0026#39;\u0026lt;g transform=\u0026#34;{rot}\u0026#34;\u0026gt;{group}\u0026lt;/g\u0026gt;\u0026#39;) parts.append(\u0026#34;\u0026lt;/svg\u0026gt;\\n\u0026#34;) return \u0026#34;\u0026#34;.join(parts) def generate(seed: int = 42) -\u0026gt; str: rng = random.Random(seed) return make_tiles( sections=10, x_tiles=4, y_tiles=3, tile_size=150, rng=rng, sw=2, ) if __name__ == \u0026#34;__main__\u0026#34;: import argparse p = argparse.ArgumentParser() p.add_argument(\u0026#34;--output\u0026#34;, \u0026#34;-o\u0026#34;, default=\u0026#34;-\u0026#34;) p.add_argument(\u0026#34;--seed\u0026#34;, type=int, default=42) args = p.parse_args() svg = generate(seed=args.seed) if args.output == \u0026#34;-\u0026#34;: sys.stdout.write(svg) else: with open(args.output, \u0026#34;w\u0026#34;) as f: f.write(svg) ","date":"2026-05-24T00:00:00Z","image":"/p/artboard-1/cover.svg","permalink":"/p/artboard-1/","title":"Artboard 1"},{"content":"I keep my domains at cloudflare, and I deploy them all with terraform. some python reads cloudflare API and generates the configuration data.\n10kpc.com accursedgame.com actuallysavetheworld.com allyourdatums.com bettertwitchchat.com directfromgermany.com dumberwithai.com filthylittlepiggies.com floremo.com humanzplz.com ladyfic.com opensoundengine.com oxfammodels.com roosterhood.com secropolis.com slipperywilly.com threebigfish.com unixfier.com userdoc.org userdok.com voteforindependents.com wickedgrog.com willitping.com wirkaufennichts.com yardata.com zettelbank.com \u0026hellip; list truncated here\n","date":"2026-05-23T00:00:00Z","image":"/p/domains/cover.svg","permalink":"/p/domains/","title":"Domains"},{"content":"Cover image test post.\n","date":"2026-05-23T00:00:00Z","image":"/p/image-test/pau-gomez-KA178s-sCFU-unsplash.jpg","permalink":"/p/image-test/","title":"Image Test"},{"content":"SVG cover image test.\n","date":"2026-05-23T00:00:00Z","image":"/p/svg-cover-test/cover.svg","permalink":"/p/svg-cover-test/","title":"SVG Cover Test"},{"content":"Stack theme has a built-in support for image galleries. It allows you to create a beautiful gallery by simply placing multiple images side-by-side.\nSample Gallery How it works The gallery is powered by Photoswipe and a custom internal script. It automatically calculates the best layout for your images based on their aspect ratios.\nTo create a gallery, you just need to put multiple images in the same line (or paragraph).\nSyntax 1 2 3 ![Image 1](image1.jpg) ![Image 2](image2.jpg) ![Image 3](image3.jpg) ![Image 4](image4.jpg) Note: There should be two spaces between the images to ensure they stay in the same line in Markdown\nGallery Syntax inspired by Typlog\n","date":"2026-01-26T00:00:00Z","image":"/p/image-gallery/helena-hertz-wWZzXlDpMog-unsplash.jpg","permalink":"/p/image-gallery/","title":"Image Gallery"},{"content":"This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.\nHeadings The following HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; elements represent six levels of section headings. \u0026lt;h1\u0026gt; is the highest section level while \u0026lt;h6\u0026gt; is the lowest.\nH3 H4 H5 H6 Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.\nBlockquote without attribution Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.\nBlockquote with attribution Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\nBlockquote with alert 📝 Note Highlights information that users should take into account, even when skimming.\n📝 Custom title You can also provide a custom title for the note alert.\n💡 Tip Optional information to help a user be more successful.\n📌 Important Crucial information necessary for users to succeed.\n⚠️ Warning Critical content demanding immediate user attention due to potential risks.\n🚨 Caution Negative potential consequences of an action.\nTables Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables Italics Bold Code italics bold code A B C D E F Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus Proin sit amet velit nec enim imperdiet vehicula. Ut bibendum vestibulum quam, eu egestas turpis gravida nec Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien Code Blocks Code block with backticks 1 2 3 4 5 6 7 8 9 10 \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block indented with four spaces \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Diff code block 1 2 3 4 5 [dependencies.bevy] git = \u0026#34;https://github.com/bevyengine/bevy\u0026#34; rev = \u0026#34;11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13\u0026#34; - features = [\u0026#34;dynamic\u0026#34;] + features = [\u0026#34;jpeg\u0026#34;, \u0026#34;dynamic\u0026#34;] One line code block 1 \u0026lt;p\u0026gt;A paragraph\u0026lt;/p\u0026gt; List Types Ordered List First item Second item Third item Unordered List List item Another item And another item Nested list Fruit Apple Orange Banana Dairy Milk Cheese Other Elements — abbr, sub, sup, kbd, mark GIF is a bitmap image format.\nH2O\nXn + Yn = Zn\nPress CTRL + ALT + Delete to end the session.\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\nThe above quote is excerpted from Rob Pike\u0026rsquo;s talk during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"2026-01-25T00:00:00Z","image":"/p/markdown-syntax-guide/pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg","permalink":"/p/markdown-syntax-guide/","title":"Markdown Syntax Guide"},{"content":"The Stack theme supports rendering mathematical notation using KaTeX.\nEnabling KaTeX Per-page basis To enable KaTeX for a specific post, include math: true in the post\u0026rsquo;s frontmatter:\n1 2 3 4 --- title: \u0026#34;My Math Post\u0026#34; math: true --- Globally To enable KaTeX for all posts, set article.math to true in your site configuration (params.yaml or params.toml):\n1 2 article: math: true Examples Inline Math You can include math inline by wrapping the expression in single dollar signs $.\nFor example: $ \\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887… $ renders as $ \\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887… $\nBlock Math For larger equations, use double dollar signs $$ to create a math block.\n$$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$More Complex Formula $$ f(a) = \\frac{1}{2\\pi i} \\oint_\\gamma \\frac{f(z)}{z-a} dz $$ Note: For a full list of supported TeX functions, refer to the KaTeX documentation.\n","date":"2026-01-24T00:00:00Z","permalink":"/p/math-typesetting/","title":"Math Typesetting"},{"content":"This theme supports Mermaid diagrams directly in your Markdown content. Mermaid lets you create diagrams and visualizations using text and code.\nAbout Mermaid.js This theme integrates Mermaid.js (v11) to render diagrams from text definitions within Markdown code blocks. Mermaid is a JavaScript-based diagramming and charting tool that uses text-based syntax inspired by Markdown.\nFor complete syntax documentation, see the Mermaid.js documentation.\nGetting Started To create a Mermaid diagram, simply use a fenced code block with mermaid as the language identifier:\n1 2 3 4 5 ```mermaid graph TD A[Start] --\u0026gt; B[Process] B --\u0026gt; C[End] ``` The diagram will be automatically rendered when the page loads.\nFeatures Auto-detection: Mermaid script only loads on pages that contain diagrams Theme Support: Diagrams automatically adapt to light/dark mode HTML Labels: Support for HTML content in labels (like \u0026lt;br/\u0026gt; for line breaks) Configurable: Customize version, security level, and more in your site config Configuration You can configure Mermaid in your site config:\nhugo.yaml:\n1 2 3 4 5 6 7 8 9 params: article: mermaid: version: \u0026#34;11\u0026#34; # Mermaid version from CDN look: classic # classic or handDrawn (sketch style) lightTheme: default # Theme for light mode darkTheme: neutral # Theme for dark mode securityLevel: strict # strict (default), loose, antiscript, sandbox htmlLabels: true # Enable HTML in labels hugo.toml:\n1 2 3 4 5 6 7 [params.article.mermaid] version = \u0026#34;11\u0026#34; # Mermaid version from CDN look = \u0026#34;classic\u0026#34; # classic or handDrawn (sketch style) lightTheme = \u0026#34;default\u0026#34; # Theme for light mode darkTheme = \u0026#34;neutral\u0026#34; # Theme for dark mode securityLevel = \u0026#34;strict\u0026#34; # strict (default), loose, antiscript, sandbox htmlLabels = true # Enable HTML in labels Additional Global Options These optional settings use Mermaid\u0026rsquo;s defaults when not specified:\nhugo.yaml:\n1 2 3 4 5 6 7 8 9 params: article: mermaid: maxTextSize: 50000 # Maximum text size (default: 50000) maxEdges: 500 # Maximum edges allowed (default: 500) fontSize: 16 # Global font size in pixels (default: 16) fontFamily: \u0026#34;arial\u0026#34; # Global font family curve: \u0026#34;basis\u0026#34; # Line curve: basis, cardinal, linear (default: basis) logLevel: 5 # Debug level 0-5, 0=debug, 5=fatal (default: 5) hugo.toml:\n1 2 3 4 5 6 7 [params.article.mermaid] maxTextSize = 50000 # Maximum text size (default: 50000) maxEdges = 500 # Maximum edges allowed (default: 500) fontSize = 16 # Global font size in pixels (default: 16) fontFamily = \u0026#34;arial\u0026#34; # Global font family curve = \u0026#34;basis\u0026#34; # Line curve: basis, cardinal, linear (default: basis) logLevel = 5 # Debug level 0-5, 0=debug, 5=fatal (default: 5) For diagram-specific options (like flowchart.useMaxWidth), use Mermaid\u0026rsquo;s init directive directly in your diagram:\n1 2 3 4 5 ```mermaid %%{init: {\u0026#39;flowchart\u0026#39;: {\u0026#39;useMaxWidth\u0026#39;: false}}}%% flowchart LR A --\u0026gt; B ``` Security Note: The default securityLevel: strict is recommended. Set to loose only if you need HTML labels like \u0026lt;br/\u0026gt; in your diagrams.\nAvailable Themes Theme Description default Standard colorful theme neutral Grayscale, great for printing and dark mode dark Designed for dark backgrounds forest Green color palette base Minimal theme, customizable with themeVariables null Disable theming entirely Custom Theme Variables For full control, use the base theme with custom variables:\nhugo.yaml:\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 params: article: mermaid: lightTheme: base darkTheme: base lightThemeVariables: primaryColor: \u0026#34;#4a90d9\u0026#34; primaryTextColor: \u0026#34;#ffffff\u0026#34; lineColor: \u0026#34;#333333\u0026#34; darkThemeVariables: primaryColor: \u0026#34;#6ab0f3\u0026#34; primaryTextColor: \u0026#34;#ffffff\u0026#34; lineColor: \u0026#34;#cccccc\u0026#34; background: \u0026#34;#1a1a2e\u0026#34; hugo.toml:\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 [params.article.mermaid] lightTheme = \u0026#34;base\u0026#34; darkTheme = \u0026#34;base\u0026#34; [params.article.mermaid.lightThemeVariables] primaryColor = \u0026#34;#4a90d9\u0026#34; primaryTextColor = \u0026#34;#ffffff\u0026#34; lineColor = \u0026#34;#333333\u0026#34; [params.article.mermaid.darkThemeVariables] primaryColor = \u0026#34;#6ab0f3\u0026#34; primaryTextColor = \u0026#34;#ffffff\u0026#34; lineColor = \u0026#34;#cccccc\u0026#34; background = \u0026#34;#1a1a2e\u0026#34; Common variables: primaryColor, secondaryColor, tertiaryColor, primaryTextColor, lineColor, background, fontFamily\nNote: Theme variables only work with the base theme and must use hex color values (e.g., #ff0000).\nDiagram Types Flowchart Flowcharts are the most common diagram type. Use graph or flowchart with direction indicators:\nTD or TB: Top to bottom BT: Bottom to top LR: Left to right RL: Right to left flowchart LR A[Hard edge] --\u003e|Link text| B(Round edge) B --\u003e C{Decision} C --\u003e|One| D[Result one] C --\u003e|Two| E[Result two]Sequence Diagram Perfect for showing interactions between components:\nsequenceDiagram participant Alice participant Bob Alice-\u003e\u003eJohn: Hello John, how are you? loop Healthcheck John-\u003e\u003eJohn: Fight against hypochondria end Note right of John: Rational thoughts prevail! John--\u003e\u003eAlice: Great! John-\u003e\u003eBob: How about you? Bob--\u003e\u003eJohn: Jolly good!Class Diagram Visualize class structures and relationships:\nclassDiagram Animal \u003c|-- Duck Animal \u003c|-- Fish Animal \u003c|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }State Diagram Model state machines and transitions:\nstateDiagram-v2 [*] --\u003e Still Still --\u003e [*] Still --\u003e Moving Moving --\u003e Still Moving --\u003e Crash Crash --\u003e [*]Entity Relationship Diagram Document database schemas:\nerDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses CUSTOMER { string name string custNumber string sector } ORDER { int orderNumber string deliveryAddress }Gantt Chart Plan and track project schedules:\ngantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2024-01-01, 30d Another task :after a1, 20d section Another Task in Another :2024-01-12, 12d another task :24dPie Chart Display proportional data:\npie showData title Key elements in Product X \"Calcium\" : 42.96 \"Potassium\" : 50.05 \"Magnesium\" : 10.01 \"Iron\" : 5Git Graph Visualize Git branching strategies:\ngitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commitMindmap Create hierarchical mindmaps:\nmindmap root((mindmap)) Origins Long history Popularisation British popular psychology author Tony Buzan Research On effectivenessand features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper MermaidTimeline Display chronological events:\ntimeline title History of Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : YouTube 2006 : TwitterAdvanced Features HTML in Labels To use HTML in labels, you must set securityLevel: loose in your site config:\nhugo.yaml:\n1 2 3 4 5 params: article: mermaid: securityLevel: loose htmlLabels: true hugo.toml:\n1 2 3 [params.article.mermaid] securityLevel = \u0026#34;loose\u0026#34; htmlLabels = true Then you can use HTML tags like \u0026lt;br/\u0026gt; for line breaks:\n1 2 3 4 ```mermaid graph TD A[Line 1\u0026lt;br/\u0026gt;Line 2] --\u0026gt; B[\u0026lt;b\u0026gt;Bold\u0026lt;/b\u0026gt; text] ``` Per-Diagram Theming Override the theme for a specific diagram using Mermaid\u0026rsquo;s frontmatter:\n1 2 3 4 5 ```mermaid %%{init: {\u0026#39;theme\u0026#39;: \u0026#39;forest\u0026#39;}}%% graph TD A[Start] --\u0026gt; B[End] ``` %%{init: {'theme': 'forest'}}%% graph TD A[Christmas] --\u003e|Get money| B(Go shopping) B --\u003e C{Let me think} C --\u003e|One| D[Laptop] C --\u003e|Two| E[iPhone] C --\u003e|Three| F[Car]Inline Styling with style You can style individual nodes directly within your diagram using the style directive:\n1 2 3 4 5 6 7 ```mermaid flowchart LR A[Start] --\u0026gt; B[Process] --\u0026gt; C[End] style A fill:#4ade80,stroke:#166534,color:#000 style B fill:#60a5fa,stroke:#1e40af,color:#000 style C fill:#f87171,stroke:#991b1b,color:#fff ``` Result:\nflowchart LR A[Start] --\u003e B[Process] --\u003e C[End] style A fill:#4ade80,stroke:#166534,color:#000 style B fill:#60a5fa,stroke:#1e40af,color:#000 style C fill:#f87171,stroke:#991b1b,color:#fffStyle properties include:\nfill - Background color stroke - Border color stroke-width - Border thickness color - Text color stroke-dasharray - Dashed border (e.g., 5 5) Styling with CSS Classes You can define reusable styles with classDef and apply them using :::className:\n1 2 3 4 5 6 7 ```mermaid flowchart LR A:::success --\u0026gt; B:::info --\u0026gt; C:::warning classDef success fill:#4ade80,stroke:#166534,color:#000 classDef info fill:#60a5fa,stroke:#1e40af,color:#000 classDef warning fill:#fbbf24,stroke:#92400e,color:#000 ``` Result:\nflowchart LR A:::success --\u003e B:::info --\u003e C:::warning classDef success fill:#4ade80,stroke:#166534,color:#000 classDef info fill:#60a5fa,stroke:#1e40af,color:#000 classDef warning fill:#fbbf24,stroke:#92400e,color:#000Subgraphs Group related nodes together:\nflowchart TB subgraph one a1--\u003ea2 end subgraph two b1--\u003eb2 end subgraph three c1--\u003ec2 end one --\u003e two three --\u003e two two --\u003e c2Theme Switching This theme automatically detects your site\u0026rsquo;s light/dark mode preference and adjusts the Mermaid diagram theme accordingly:\nLight mode: Uses the default Mermaid theme Dark mode: Uses the dark Mermaid theme (configurable) Try toggling the theme switcher to see diagrams update in real-time!\nComplex Example Here\u0026rsquo;s an example with subgraphs, HTML labels, emojis, and custom styling:\nflowchart TD subgraph client[\"👤 Client\"] A[\"User Device192.168.1.10\"] end subgraph cloud[\"☁️ Cloud Gateway\"] B[\"Load Balancer(SSL Termination)\"] end subgraph server[\"🖥️ Application Server\"] C[\"API Gateway10.0.0.1\"] D[\"Auth Service10.0.0.2\"] E[\"Web Server10.0.0.3\"] F[\"Database10.0.0.4\"] end A -- \"HTTPS Request\" --\u003e B B -- \"Forward(internal)\" --\u003e C C -- \"Authenticate\" --\u003e D D -- \"Token\" --\u003e C C -- \"Route\" --\u003e E E --\u003e F style client fill:#1a365d,stroke:#2c5282,color:#fff style cloud fill:#f6ad55,stroke:#dd6b20,color:#000 style server fill:#276749,stroke:#22543d,color:#fff Note: This example requires securityLevel: loose for HTML labels and styling to work.\nKnown Limitations Dark Mode Theming Mermaid.js\u0026rsquo;s built-in themes have some limitations:\ndark theme (default): Best text contrast, but some diagram backgrounds may appear brownish (e.g., Gantt charts) neutral theme: Better background colors, but some text (labels, legends) may have reduced contrast For full control, use the base theme with custom variables:\nhugo.yaml:\n1 2 3 4 5 6 7 8 9 params: article: mermaid: darkTheme: base darkThemeVariables: primaryColor: \u0026#34;#1f2937\u0026#34; primaryTextColor: \u0026#34;#ffffff\u0026#34; lineColor: \u0026#34;#9ca3af\u0026#34; textColor: \u0026#34;#e5e7eb\u0026#34; hugo.toml:\n1 2 3 4 5 6 7 8 [params.article.mermaid] darkTheme = \u0026#34;base\u0026#34; [params.article.mermaid.darkThemeVariables] primaryColor = \u0026#34;#1f2937\u0026#34; primaryTextColor = \u0026#34;#ffffff\u0026#34; lineColor = \u0026#34;#9ca3af\u0026#34; textColor = \u0026#34;#e5e7eb\u0026#34; We plan to improve dark mode theming in future updates as Mermaid.js evolves.\nTroubleshooting Diagram not rendering? Make sure you\u0026rsquo;re using a fenced code block with mermaid as the language Check your browser\u0026rsquo;s console for syntax errors Verify your Mermaid syntax at Mermaid Live Editor HTML not working in labels? HTML in labels requires securityLevel: loose. Update your configuration:\nhugo.yaml:\n1 2 3 4 5 params: article: mermaid: securityLevel: loose htmlLabels: true hugo.toml:\n1 2 3 [params.article.mermaid] securityLevel = \u0026#34;loose\u0026#34; htmlLabels = true Warning: Using loose security level allows HTML in diagrams. Only use this if you trust your diagram content.\nSyntax errors? Mermaid is strict about syntax. Common issues:\nMissing spaces around arrows Unclosed brackets or quotes Invalid node IDs (avoid special characters) Resources Mermaid Documentation Mermaid Live Editor - Test diagrams interactively Mermaid Syntax Reference ","date":"2025-12-23T00:00:00Z","permalink":"/p/mermaid-diagrams/","title":"Mermaid Diagrams"}]