Mermaid

I’ve integrated Mermaid.js into this blog to create interactive diagrams directly in markdown. This enables clear visualization of architectures, workflows, and processes.

Examples

Flow Chart

Here’s a simple deployment flow:

Sequence Diagram

API authentication flow:

State Diagram

Order processing states:

Git Flow

Entity Relationship

Database schema for a blog:

Pie Chart

Technology stack distribution:

Usage in Markdown

In a blog post, I can use Mermaid like this:

<script>
  import MermaidDiagram from '$lib/components/MermaidDiagram.svelte'
</script>

<MermaidDiagram height={300}
diagram={`flowchart LR
	  Start --> Process --> End`} />

See how I did it: https://github.com/wcygan/wcygan.github.io/pull/30