diff --git a/nix/haskell-overlay.nix b/nix/haskell-overlay.nix
index 13abebf..9825691 100644
--- a/nix/haskell-overlay.nix
+++ b/nix/haskell-overlay.nix
@@ -35,7 +35,10 @@ final: prev:
           website = prev.stdenv.mkDerivation {
             #__contentAddressed = true; # uncomment if using cas: https://www.tweag.io/blog/2020-09-10-nix-cas/
             name = "website";
-            buildInputs = [ ssg ];
+            buildInputs = [
+              ssg
+              final.graphviz
+            ];
             src = prev.nix-gitignore.gitignoreSourcePure [
               ../.gitignore
               "../.git"
diff --git a/src/2022-03-27-debug.md b/src/2022-03-27-debug.md
index 6c5101a..f6666b5 100644
--- a/src/2022-03-27-debug.md
+++ b/src/2022-03-27-debug.md
@@ -44,4 +44,38 @@ titleRoute metadata = constRoute <$> fileNameFromTitle metadata
 
       fileNameFromTitle :: Metadata -> Maybe FilePath
       fileNameFromTitle metadata = slug <$> (ignore "" =<< lookupString "title" metadata)
+```
+
+---
+
+Here's a graphviz graph
+
+```dot
+digraph G {
+
+  subgraph cluster_0 {
+    style=filled;
+    color=lightgrey;
+    node [style=filled,color=white];
+    a0 -> a1 -> a2 -> a3;
+    label = "process #1";
+  }
+
+  subgraph cluster_1 {
+    node [style=filled];
+    b0 -> b1 -> b2 -> b3;
+    label = "process #2";
+    color=blue
+  }
+  start -> a0;
+  start -> b0;
+  a1 -> b3;
+  b2 -> a3;
+  a3 -> a0;
+  a3 -> end;
+  b3 -> end;
+
+  start [shape=Mdiamond];
+  end [shape=Msquare];
+}
 ```
\ No newline at end of file
diff --git a/src/css/styles.css b/src/css/styles.css
index b1024c2..47c377a 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -5,7 +5,8 @@
 
 body {
     color: #777;
-    --bs-body-font-size: 20px
+    --bs-body-font-size: 20px;
+    --bs-font-monospace: Fira Code;
 }
 
 #navbar-image {
diff --git a/ssg/src/Main.hs b/ssg/src/Main.hs
index e506975..414dbf4 100644
--- a/ssg/src/Main.hs
+++ b/ssg/src/Main.hs
@@ -6,6 +6,7 @@ import Hakyll
 import Text.Pandoc
   ( Extension (Ext_fenced_code_attributes, Ext_footnotes, Ext_gfm_auto_identifiers, Ext_implicit_header_references, Ext_smart),
     Extensions,
+    Pandoc,
     ReaderOptions,
     WriterOptions (writerHighlightStyle),
     extensionsFromList,
@@ -16,6 +17,7 @@ import Text.Pandoc
 import Text.Pandoc.Highlighting (Style, breezeDark, styleToCss)
 import Debug.Trace
 import Data.Map (mapKeys)
+import Text.Pandoc.Walk ( walk, walkM )
 
 -- ---------
 
@@ -24,7 +26,8 @@ import Formats.Posts
 import Util.Hakyll.Routes
 import Util.Hakyll.Context
 import Util.Hash
-import Preprocessing.Replacement
+import Preprocessing.LogoLinks
+import Preprocessing.Graphviz
 
 --------------------------------------------------------------------------------
 -- CONFIG
@@ -221,7 +224,10 @@ pandocCompilerCustom =
 
 pandocRendererCustom :: Item String -> Compiler (Item String)
 pandocRendererCustom =
-  renderPandocWith pandocReaderOpts pandocWriterOpts
+  renderPandocWithTransformM pandocReaderOpts pandocWriterOpts transform
+    where
+      transform :: Pandoc -> Compiler Pandoc
+      transform = unsafeCompiler . walkM codeBlock
 
 pandocExtensionsCustom :: Extensions
 pandocExtensionsCustom =
diff --git a/ssg/src/Preprocessing/Graphviz.hs b/ssg/src/Preprocessing/Graphviz.hs
new file mode 100644
index 0000000..667ec21
--- /dev/null
+++ b/ssg/src/Preprocessing/Graphviz.hs
@@ -0,0 +1,22 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Preprocessing.Graphviz where
+
+import Data.Text (Text, pack, unpack)
+import System.Process ( readProcess )
+import Text.Pandoc
+  ( Pandoc,
+    Block (RawBlock, CodeBlock),
+    Format (Format),
+  )
+
+codeBlock :: Block -> IO Block
+codeBlock cb@(CodeBlock (id, classes, namevals) contents)
+  | "dot" `elem` classes = RawBlock (Format "html") . pack <$> svg (unpack contents)
+  | otherwise = return cb
+codeBlock x = return x
+
+svg :: String -> IO String
+svg = readProcess "dot" ["-Tsvg"]
+
+-- PlantUML
\ No newline at end of file
diff --git a/ssg/src/Preprocessing/Replacement.hs b/ssg/src/Preprocessing/LogoLinks.hs
similarity index 90%
rename from ssg/src/Preprocessing/Replacement.hs
rename to ssg/src/Preprocessing/LogoLinks.hs
index 43642e3..25f858b 100644
--- a/ssg/src/Preprocessing/Replacement.hs
+++ b/ssg/src/Preprocessing/LogoLinks.hs
@@ -1,5 +1,5 @@
 {-# LANGUAGE QuasiQuotes, FlexibleContexts #-}
-module Preprocessing.Replacement where
+module Preprocessing.LogoLinks where
 
 import Hakyll
 import Text.Regex.PCRE.Heavy (Regex, re, gsub)
@@ -117,22 +117,4 @@ youtube :: LLConverter
 youtube _ link = "<div class='nani_youtube'><iframe src='" ++ link ++ "' frameborder='0' allowfullscreen></iframe></div>"
 
 jisho :: LLConverter 
-jisho name link = undefined
-
-----------------------------------------------------------
-----------------------------------------------------------
-----------------------------------------------------------
-
--- Wishlist:
-  -- Cards:
-    -- Github
-    -- Jisho
-    -- Wikipedia
-    -- Unicode
-    -- Terminal
-
-  -- Regex
-
-  -- Diagrams:
-    -- PlantUML
-    -- Graphviz
\ No newline at end of file
+jisho name link = undefined
\ No newline at end of file
diff --git a/ssg/ssg.cabal b/ssg/ssg.cabal
index 0898dd2..ff7daf9 100644
--- a/ssg/ssg.cabal
+++ b/ssg/ssg.cabal
@@ -11,7 +11,8 @@ executable hakyll-site
   hs-source-dirs:   src
   build-depends:    base >= 4.8
                   , hakyll >= 4.15
-                  , pandoc == 2.14.*
+                  , pandoc >= 2.14
+                  , pandoc-types >= 1.22.1
                   , slugger >= 0.1.0.1
                   , text >= 1.2
                   , pcre-heavy >= 1.0.0.2
@@ -20,5 +21,6 @@ executable hakyll-site
                   , base16-bytestring >= 1.0.2.0
                   , containers >= 0.6.2.1
                   , cryptohash-sha256 >= 0.11.102.1
+                  , process >=1.6.9.0
   ghc-options:      -Wall -threaded -dynamic
   default-language: Haskell2010