diff --git a/README.md b/README.md
index f7b34c6..27f22c3 100644
--- a/README.md
+++ b/README.md
@@ -149,8 +149,8 @@ auto_toc: true
 highlighter: true
 
 # enable mermaid diagramming and charting
-# put your diagram code inside <div class='mermaid'>...</div>
-mermaid: false
+# put your diagram code inside ```mermaid ... ``` code fence
+mermaid: true
 
 # enable the copy to clipboard icon for code snippets
 copy_code: true
@@ -264,18 +264,6 @@ file or a directory in the same directory as the file itself.
 When the `mermaid` option is enabled, you can embed Mermaid diagrams in your
 document using either of the following methods:
 
-**Using a `<div>` block with `mermaid` class**:
-
-   ```html
-   <div class="mermaid">
-     graph TD;
-     A-->B;
-     A-->C;
-     B-->D;
-     C-->D;
-   </div>
-   ```
-
 **Using a code fence with `mermaid` language specifier**:
 
    ````markdown
@@ -287,6 +275,18 @@ document using either of the following methods:
    C-->D;
    ```
    ````
+   
+**Using a `<div>` block with `mermaid` class**:
+
+   ```html
+   <div class="mermaid">
+     graph TD;
+     A-->B;
+     A-->C;
+     B-->D;
+     C-->D;
+   </div>
+   ```
 
 ### Table of Contents Generation
 
diff --git a/lib/madness/settings.rb b/lib/madness/settings.rb
index 73e3fa7..4e780cd 100644
--- a/lib/madness/settings.rb
+++ b/lib/madness/settings.rb
@@ -63,7 +63,7 @@ def defaults
         auto_nav:          true,
         auto_toc:          true,
         highlighter:       true,
-        mermaid:           false,
+        mermaid:           true,
         copy_code:         true,
         shortlinks:        false,
         source_link:       nil,
diff --git a/lib/madness/templates/madness.yml b/lib/madness/templates/madness.yml
index 0d5eafb..247928b 100644
--- a/lib/madness/templates/madness.yml
+++ b/lib/madness/templates/madness.yml
@@ -43,8 +43,8 @@ auto_toc: true
 highlighter: true
 
 # enable mermaid diagramming and charting
-# put your diagram code inside <div class='mermaid'>...</div>
-mermaid: false
+# put your diagram code inside ```mermaid ... ``` code fence
+mermaid: true
 
 # enable the copy to clipboard icon for code snippets
 copy_code: true
diff --git a/site/index.html b/site/index.html
index ce26032..b0ba969 100644
--- a/site/index.html
+++ b/site/index.html
@@ -172,8 +172,8 @@ <h2 id="configuration-file">Configuration File</h2>
 <span class="na">highlighter</span><span class="pi">:</span> <span class="kc">true</span>
 
 <span class="c1"># enable mermaid diagramming and charting</span>
-<span class="c1"># put your diagram code inside &lt;div class='mermaid'&gt;...&lt;/div&gt;</span>
-<span class="na">mermaid</span><span class="pi">:</span> <span class="kc">false</span>
+<span class="c1"># put your diagram code inside ```mermaid ... ``` code fence</span>
+<span class="na">mermaid</span><span class="pi">:</span> <span class="kc">true</span>
 
 <span class="c1"># enable the copy to clipboard icon for code snippets</span>
 <span class="na">copy_code</span><span class="pi">:</span> <span class="kc">true</span>
@@ -284,15 +284,6 @@ <h3 id="mermaid-diagrams-and-charts">Mermaid Diagrams and Charts</h3>
 <p>When the <code>mermaid</code> option is enabled, you can embed Mermaid diagrams in your
 document using either of the following methods:</p>
 
-<p><strong>Using a <code>&lt;div&gt;</code> block with <code>mermaid</code> class</strong>:</p>
-<div class="highlight"><pre class="highlight html"><code>   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mermaid"</span><span class="nt">&gt;</span>
-     graph TD;
-     A--&gt;B;
-     A--&gt;C;
-     B--&gt;D;
-     C--&gt;D;
-   <span class="nt">&lt;/div&gt;</span>
-</code></pre></div>
 <p><strong>Using a code fence with <code>mermaid</code> language specifier</strong>:</p>
 <div class="highlight"><pre class="highlight markdown"><code>   <span class="p">```</span><span class="nl">mermaid
 </span><span class="sb">   graph TD;
@@ -302,6 +293,15 @@ <h3 id="mermaid-diagrams-and-charts">Mermaid Diagrams and Charts</h3>
    C--&gt;D;</span>
    <span class="p">```</span>
 </code></pre></div>
+<p><strong>Using a <code>&lt;div&gt;</code> block with <code>mermaid</code> class</strong>:</p>
+<div class="highlight"><pre class="highlight html"><code>   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mermaid"</span><span class="nt">&gt;</span>
+     graph TD;
+     A--&gt;B;
+     A--&gt;C;
+     B--&gt;D;
+     C--&gt;D;
+   <span class="nt">&lt;/div&gt;</span>
+</code></pre></div>
 <h3 id="table-of-contents-generation">Table of Contents Generation</h3>
 
 <h4 id="site-wide">Site-wide</h4>
diff --git a/spec/approvals/cli/config/show b/spec/approvals/cli/config/show
index 56656aa..5a0ed1a 100644
--- a/spec/approvals/cli/config/show
+++ b/spec/approvals/cli/config/show
@@ -9,7 +9,7 @@
             auto_nav:  true
             auto_toc:  true
          highlighter:  true
-             mermaid:  ~
+             mermaid:  true
            copy_code:  true
           shortlinks:  ~
          source_link:  ~
diff --git a/spec/approvals/cli/config/show-non-default b/spec/approvals/cli/config/show-non-default
index 1236784..31ae9bc 100644
--- a/spec/approvals/cli/config/show-non-default
+++ b/spec/approvals/cli/config/show-non-default
@@ -9,7 +9,7 @@
             auto_nav:  true
             auto_toc:  true
          highlighter:  true
-             mermaid:  ~
+             mermaid:  true
            copy_code:  true
           shortlinks:  ~
          source_link:  ~
diff --git a/spec/approvals/render/all-disabled b/spec/approvals/render/all-disabled
index a8fb499..96c6823 100644
--- a/spec/approvals/render/all-disabled
+++ b/spec/approvals/render/all-disabled
@@ -12,12 +12,10 @@ with <strong>markdown support</strong> in it</p>
 </blockquote>
 
 <p>Inline <code>code_word</code> and block code:</p>
-
-<pre><code class="ruby">def say(message = &quot;Hi&quot;)
-  puts message
-end
-</code></pre>
-
+<div class="highlight"><pre class="highlight ruby"><code><span class="k">def</span> <span class="nf">say</span><span class="p">(</span><span class="n">message</span> <span class="o">=</span> <span class="s2">"Hi"</span><span class="p">)</span>
+  <span class="nb">puts</span> <span class="n">message</span>
+<span class="k">end</span>
+</code></pre></div>
 <h2 id="footnotes-images">Footnotes, Images</h2>
 
 <p>This needs a footnote explanation<sup id="fnref1"><a href="#fn1">1</a></sup></p>
@@ -112,14 +110,12 @@ graph TD;
 </div>
 
 <p>Or using the <code>mermaid</code> code block:</p>
-
-<pre><code class="mermaid">graph TD;
-    A--&gt;B;
-    A--&gt;C;
-    B--&gt;D;
-    C--&gt;D;
-</code></pre>
-
+<div class='mermaid'>graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+</div>
 <h2 id="unsafe-html">Unsafe HTML</h2>
 
 <p>This is calculated by Javascript: <span id='demo'></div></p>