Mermaid Diagrams & Expressive Code Demo

Mermaid Diagrams#

Mermaid diagrams render client-side using the astro-mermaid integration — no Playwright or Chromium needed at build time, making it compatible with any static hosting provider.

Flowchart#

graph TD
    A[Install Astro] --> B[Add MDX Integration]
    B --> C[Configure Plugins]
    C --> D{Which plugins?}
    D -->|Linking| E[rehype-slug + autolink]
    D -->|Callouts| F[remark-directive + callout]
    D -->|Diagrams| G[rehype-mermaid]
    D -->|Code| H[astro-expressive-code]
    E --> I[Write Content]
    F --> I
    G --> I
    H --> I
    I --> J[Build & Deploy]

Sequence Diagram#

sequenceDiagram
    participant User
    participant Astro
    participant Markdown
    participant Plugins

    User->>Astro: Create .mdx file
    Astro->>Markdown: Parse MDX content
    Markdown->>Plugins: Run remark plugins
    Note right of Plugins: directive → callout<br/>mermaid → SVG
    Plugins-->>Astro: Transformed HTML
    Astro->>User: Rendered page

Site Navigation Map#

graph LR
    Home["/"] --> Blog["/blog/*"]
    Home --> Demo["/demo/*"]
    Blog --> HelloWorld["/blog/hello-world"]
    Demo --> Callouts["/demo/callouts"]
    Demo --> Features["/demo/features"]

    style Home fill:#448aff,color:#fff
    style Blog fill:#00bfa5,color:#fff
    style Demo fill:#a448ff,color:#fff

Expressive Code#

All code blocks are automatically enhanced with syntax highlighting, editor frames, and more.

Editor Frame with Title#

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

export default defineConfig({
  integrations: [mdx()],
  markdown: {
    rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }]],
  },
});

Line Highlighting#

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';              // ← MDX integration
import rehypeSlug from 'rehype-slug';        // ← Heading IDs
import rehypeAutolinkHeadings from 'rehype-autolink-headings'; // ← Anchor links

export default defineConfig({
  integrations: [mdx()],
});

Terminal Frame#

npm create astro@latest my-project
cd my-project
npm install rehype-slug rehype-autolink-headings
npm run dev
# 🚀 Server running at http://localhost:4321

Text Markers#

import rehypeMermaid from 'rehype-mermaid';

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypeMermaid, { strategy: 'inline-svg' }],
    ],
  },
});

Diff Markers#

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
- import shiki from 'shiki'; // removed
+ import expressiveCode from 'astro-expressive-code'; // added

export default defineConfig({
-  markdown: { shikiConfig: { theme: 'github-dark' } },
+  integrations: [expressiveCode({ themes: ['github-dark', 'github-light'] }), mdx()],
});

Collapsible Sections#

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import remarkDirective from 'remark-directive';
// Only the key configuration is visible by default:
export default defineConfig({
  integrations: [mdx()],
  markdown: {
    remarkPlugins: [remarkDirective],
    rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }]],
  },
});

Multiple Languages#

def fibonacci(n: int) -> list[int]:
    """Generate Fibonacci sequence up to n terms."""
    if n <= 0:
        return []
    elif n == 1:
        return [0]

    sequence = [0, 1]
    for _ in range(2, n):
        sequence.append(sequence[-1] + sequence[-2])
    return sequence

print(fibonacci(10))
# [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Combining Callouts + Code + Diagrams#