mermaid

package.json

@@ -25,6 +25,7 @@
     "astro": "^5.16.8",
     "ioredis": "^5.9.1",
     "lucide-react": "^0.468.0",
+    "mermaid": "^11.12.2",
     "prismjs": "^1.30.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",

src/components/Embeds/index.ts

@@ -5,8 +5,14 @@
 export { default as YouTubeEmbed } from '../YouTubeEmbed.astro';
 export { default as TwitterEmbed } from '../TwitterEmbed.astro';
 export { default as GenericEmbed } from '../GenericEmbed.astro';
+export { default as Mermaid } from '../Mermaid.astro';
 
 // Type definitions for props
+export interface MermaidProps {
+  graph: string;
+  id?: string;
+}
+
 export interface YouTubeEmbedProps {
   videoId: string;
   title?: string;

src/components/Mermaid.astro

@@ -0,0 +1,128 @@
+---
+interface Props {
+  graph: string;
+  id?: string;
+}
+
+const { graph, id = `mermaid-${Math.random().toString(36).substring(2, 11)}` } = Astro.props;
+---
+
+<div class="mermaid-wrapper my-8 not-prose">
+  <div class="bg-white border border-slate-200/80 rounded-lg overflow-hidden shadow-sm">
+    <div class="px-3 py-2 border-b border-slate-100 bg-slate-50/30 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <svg class="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        </svg>
+        <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Diagram</span>
+      </div>
+    </div>
+    <div 
+      class="mermaid-container p-8 md:p-12 overflow-x-auto flex justify-center bg-white"
+    >
+      <div class="mermaid opacity-0 transition-opacity duration-500 w-full max-w-4xl" id={id}>
+        {graph}
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import mermaid from 'mermaid';
+
+  // Initialize mermaid
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'default',
+    darkMode: false,
+    themeVariables: {
+      fontFamily: 'Inter, system-ui, sans-serif',
+      fontSize: '16px',
+      primaryColor: '#ffffff',
+      nodeBorder: '#e2e8f0',
+      mainBkg: '#ffffff',
+      lineColor: '#cbd5e1',
+    },
+    securityLevel: 'loose',
+  });
+
+  const renderMermaid = async () => {
+    const elements = document.querySelectorAll('.mermaid');
+    for (const element of elements) {
+      if (element.getAttribute('data-processed')) continue;
+      
+      try {
+        const content = element.textContent || '';
+        const id = element.id;
+        const { svg } = await mermaid.render(`${id}-svg`, content);
+        element.innerHTML = svg;
+        element.classList.remove('opacity-0');
+        element.setAttribute('data-processed', 'true');
+      } catch (error) {
+        console.error('Mermaid rendering failed:', error);
+        element.innerHTML = '<div class="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">Failed to render diagram. Please check the syntax.</div>';
+        element.classList.remove('opacity-0');
+      }
+    }
+  };
+
+  // Run on initial load
+  renderMermaid();
+
+  // Support for Astro View Transitions if added later
+  document.addEventListener('astro:page-load', renderMermaid);
+</script>
+
+<style>
+  .mermaid-container :global(svg) {
+    width: 100% !important;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    background-color: transparent !important;
+  }
+
+  .mermaid-container :global(rect),
+  .mermaid-container :global(circle),
+  .mermaid-container :global(ellipse),
+  .mermaid-container :global(polygon),
+  .mermaid-container :global(path),
+  .mermaid-container :global(.actor),
+  .mermaid-container :global(.node) {
+    fill: white !important;
+    stroke: #cbd5e1 !important;
+    stroke-width: 1.5px !important;
+  }
+
+  .mermaid-container :global(.edgePath .path),
+  .mermaid-container :global(.messageLine0),
+  .mermaid-container :global(.messageLine1),
+  .mermaid-container :global(.flowchart-link) {
+    stroke: #cbd5e1 !important;
+    stroke-width: 1.5px !important;
+  }
+
+  .mermaid-container :global(text),
+  .mermaid-container :global(.label),
+  .mermaid-container :global(.labelText),
+  .mermaid-container :global(.edgeLabel),
+  .mermaid-container :global(.node text),
+  .mermaid-container :global(tspan) {
+    font-family: 'Inter', sans-serif !important;
+    fill: #334155 !important;
+    color: #334155 !important;
+    stroke: none !important;
+    font-size: 16px !important;
+  }
+
+  .mermaid-container :global(.marker),
+  .mermaid-container :global(marker path) {
+    fill: #cbd5e1 !important;
+    stroke: #cbd5e1 !important;
+  }
+  
+  /* Hide the raw text before rendering */
+  .mermaid:not([data-processed]) {
+    visibility: hidden;
+  }
+</style>

src/data/blogPosts.ts

@@ -37,9 +37,9 @@ export const blogPosts: BlogPost[] = [
   },
   {
     title: "Rich Content Embedding Demo",
-    description: "Testing our new free embed components for YouTube, Twitter, and other platforms",
+    description: "Testing our new free embed components for YouTube, Twitter, Mermaid diagrams, and other platforms",
     date: "2024-02-15",
     slug: "embed-demo",
-    tags: ["embeds", "components", "tutorial"]
+    tags: ["embeds", "components", "tutorial", "mermaid"]
   }
 ];

src/pages/blog/embed-demo.astro

@@ -11,13 +11,14 @@ import { CodeBlock } from '../../components/ArticleBlockquote';
 import YouTubeEmbed from '../../components/YouTubeEmbed.astro';
 import TwitterEmbed from '../../components/TwitterEmbed.astro';
 import GenericEmbed from '../../components/GenericEmbed.astro';
+import Mermaid from '../../components/Mermaid.astro';
 
 const post = {
   title: "Rich Content Embedding Demo",
-  description: "Testing our new free embed components for YouTube, Twitter, and other platforms",
+  description: "Testing our new free embed components for YouTube, Twitter, Mermaid diagrams, and other platforms",
   date: "2024-02-15",
   slug: "embed-demo",
-  tags: ["embeds", "components", "tutorial"]
+  tags: ["embeds", "components", "tutorial", "mermaid"]
 };
 
 const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
@@ -179,6 +180,39 @@ const readingTime = 5;
   maxWidth="800px"
 />`}
         />
+
+        <H2>Mermaid Diagrams</H2>
+        <Paragraph>
+          We've added support for Mermaid diagrams! You can now create flowcharts, sequence diagrams, and more using a simple text-based syntax.
+        </Paragraph>
+
+        <div class="my-8">
+          <Mermaid 
+            graph={`graph LR
+  A[Client] --> B[Load Balancer]
+  B --> C[App Server 1]
+  B --> D[App Server 2]
+  C --> E[(Database)]
+  D --> E`}
+          />
+        </div>
+
+        <Paragraph>
+          Usage is straightforward:
+        </Paragraph>
+
+        <CodeBlock
+          language="astro"
+          showLineNumbers={true}
+          code={`<Mermaid 
+  graph={\`graph LR
+  A[Client] --> B[Load Balancer]
+  B --> C[App Server 1]
+  B --> D[App Server 2]
+  C --> E[(Database)]
+  D --> E\`}
+/>`}
+        />
         
         <H2>Styling Control</H2>
         <Paragraph>