<h1 id="aside-leveraging-ai-for-blog-content">(Aside) Leveraging AI for Blog Content</h1>
<p>Most of this change was written by Codex, and finished up by Cursor. Cursor did a much better job actually running and fixing the errors in the build. When I joined Super.com, my current employer, I rewrote this entire SSG blog engine from Pelican into React + Next as a learning exercise. I'd been writing production code in Angular for years so it wasn't a big jump. I've picked at this blog over the years, but purely as an engine to keep my skills sharp since I'm a senior leader now and spend most of my days in meetings or planning technical and organizational strategy. This is the first blog post in a long time.</p>
<p>AI wrote the first draft. It was bad. For the code, that was ok. It took some iterating but AI codes well enough now if you hold its hand.</p>
<p>The mermaid chart syntax example in this post is all AI. The actual writing style of AI makes my eyes glaze over and I don't want to subject other people to it, so I rewrote basically all of the actual text. No sense contributing too much towards a dead internet, right?</p>
<p>Have feelings about the idea of AI being used for this sort of thing? I'd love to hear your thoughts. You can find my socials on the about page.</p>
<hr>
<h1 id="how-the-rendering-works">How the rendering works</h1>
<p>Take a look at the <a href="https://github.com/mermaid-js/mermaid">official GitHUb page for Mermaid-JS</a> for more details about mermaid in general. It's really neat and I'm convinced it'll be considered the standard for flow charts for the next while.</p>
<p>The markdown loader still starts by parsing front matter with <a href="https://github.com/jonschlinkert/gray-matter"><code>gray-matter</code></a>, but the Remark pipeline now detects any fenced code block labeled <code>mermaid</code> and rewrites it into HTML with the <code>mermaid</code> class.</p>
<p>It's all pretty simple from there. You can see <code>remarkMermaidToHtml</code> (from <a href="https://github.com/kylep/multi/blob/main/apps/blog/blog/utils/remarkMermaid.js">remarkMermaidToHtml in remarkMermaid.js</a>) is new here:</p>
<pre><code class="language-javascript">	static async getRenderedMarkdownAndProps(rawMarkdown){
		// contentHtml is the rendered markdown, metaData is the front matter as a flat object
		const { data: metaData, content: markdown } = matter(rawMarkdown);
		MarkdownService.#serializeDates(metaData); 
                const result = await remark()
                        .use(remarkGfm)
                        .use(remarkToc, {heading: 'Table of contents'})
                        .use(remarkMermaidToHtml)
                        .use(remarkHtml, { sanitize: false })
                        .process(markdown);
		const contentHtml = result.toString();
		const props = {props: {contentHtml, metaData},};
		return props;
	 };
</code></pre>
<hr>
<h1 id="mermaid-syntax-reference">Mermaid Syntax Reference</h1>
<p>Here's a trivial reference of how to use Mermaid syntax.</p>
<p>I plan to use this reference myself for future content, and may update it with more useful examples in time.</p>
<h2 id="flowchart">Flowchart</h2>
<pre><code class="language-text">graph TD;
  Source[Markdown] --> Remark;
  Remark --> |HTML| Browser;
  Browser --> MermaidRuntime;
  MermaidRuntime --> |SVG| PublishedPost;
</code></pre>
<pre class="mermaid">
graph TD;
  Source[Markdown] --> Remark;
  Remark --> |HTML| Browser;
  Browser --> MermaidRuntime;
  MermaidRuntime --> |SVG| PublishedPost;
</pre>
<h2 id="sequence-diagram">Sequence diagram</h2>
<pre><code class="language-text">sequenceDiagram
  participant Author
  participant Blog
  participant Mermaid
  Author->>Blog: Write markdown with mermaid fences
  Blog->>Mermaid: Request runtime initialization
  Mermaid-->>Blog: Render SVG
  Blog-->>Author: Display diagram
</code></pre>
<pre class="mermaid">
sequenceDiagram
  participant Author
  participant Blog
  participant Mermaid
  Author->>Blog: Write markdown with mermaid fences
  Blog->>Mermaid: Request runtime initialization
  Mermaid-->>Blog: Render SVG
  Blog-->>Author: Display diagram
</pre>
<h2 id="state-diagram">State diagram</h2>
<pre><code class="language-text">stateDiagram-v2
  [*] --> Draft
  Draft --> Review: lint &#x26; build
  Review --> Published: merge
  Published --> Archived
</code></pre>
<pre class="mermaid">
stateDiagram-v2
  [*] --> Draft
  Draft --> Review: lint & build
  Review --> Published: merge
  Published --> Archived
</pre>
<h2 id="class-diagram">Class diagram</h2>
<pre><code class="language-text">classDiagram
  class MarkdownService {
    +getRenderedMarkdownAndProps()
  }
  class BlogPostContentPage {
    +useEffect mermaid bootstrap
  }
  MarkdownService --> BlogPostContentPage : HTML
</code></pre>
<pre class="mermaid">
classDiagram
  class MarkdownService {
    +getRenderedMarkdownAndProps()
  }
  class BlogPostContentPage {
    +useEffect mermaid bootstrap
  }
  MarkdownService --> BlogPostContentPage : HTML
</pre>


Kyle Pericak

Mermaid Diagrams in Markdown