Problem
Blog posts currently have no way to render diagrams — only ASCII art inside fenced code blocks. This is a meaningful limitation for technical posts that explain graphs, flows, and architectures.
For example, the SOFAI post explains a 5-node cycle graph with this:
```text
A
/
E B
| |
D - C
```
A Mermaid block would render this as an actual graph with nodes and edges:
```mermaid
graph TD
A((A)) --- B((B))
B((B)) --- C((C))
C((C)) --- D((D))
D((D)) --- E((E))
E((E)) --- A((A))
```
The same post also has an ASCII flow diagram for the SOFAI S1/S2 escalation loop that would render more clearly as a Mermaid flowchart.
Why it matters
- Graph and architecture diagrams are common in developer content — forcing ASCII limits what authors can express clearly
- Mermaid is already the standard in GitHub-flavoured Markdown, so authors writing here know the syntax
- The blog uses
react-markdown with rehype plugins — rehype-mermaid is a straightforward addition to the existing pipeline
Out of scope
This is not a request to change existing posts — ASCII fallbacks can stay until authors choose to update them.
Problem
Blog posts currently have no way to render diagrams — only ASCII art inside fenced code blocks. This is a meaningful limitation for technical posts that explain graphs, flows, and architectures.
For example, the SOFAI post explains a 5-node cycle graph with this:
```text
A
/
E B
| |
D - C
```
A Mermaid block would render this as an actual graph with nodes and edges:
```mermaid
graph TD
A((A)) --- B((B))
B((B)) --- C((C))
C((C)) --- D((D))
D((D)) --- E((E))
E((E)) --- A((A))
```
The same post also has an ASCII flow diagram for the SOFAI S1/S2 escalation loop that would render more clearly as a Mermaid flowchart.
Why it matters
react-markdownwithrehypeplugins —rehype-mermaidis a straightforward addition to the existing pipelineOut of scope
This is not a request to change existing posts — ASCII fallbacks can stay until authors choose to update them.