{(node.type === "code") && (
  node.lang === "mermaid"
    ? <MermaidChart code={node.value} />
    : <BaseCodeblock code={node.value} lang={node.lang ?? 'text'} />
)}

// Mermaid code block handler
{node.type === "code" && node.lang === "mermaid" && (
  node.data?.isMermaid && node.data?.mermaidId && mermaidSvgs && mermaidSvgs[node.data.mermaidId]
    ? <div class="mermaid-diagram" set:html={mermaidSvgs[node.data.mermaidId]} />
    : <div class="mermaid-error">
        ⚠️ Mermaid diagram could not be rendered.
      </div>
)}

// HAST SVG handler
{node.type === "element" && node.tagName === "svg" && (
  <svg {...node.properties}>
    {node.children && node.children.map(child => <Astro.self node={child} data={data} mermaidSvgs={mermaidSvgs} />)}
  </svg>
)}

// Explicit handling for all common tags
{node.type === "element" && node.tagName === "p" && (
  <p {...node.properties}>...</p>
)}
// ...repeat for span, div, ul, ol, li, table, etc.

---
import {dirname} from 'path'
import ArticleCallout from './callouts/ArticleCallout.astro';
import ArticleCitationsBlock from './citations/ArticleCitations.astro';
import ArticleCitation from './citations/ArticleCitation.astro';
import BaseCodeblock from '../codeblocks/BaseCodeblock.astro';

interface Props {
    /**
     * Accepts a mapping of mermaidId to SVG strings for inlining Mermaid diagrams.
     */
    mermaidSvgs?: Record<string, string>;
    /**
     * Markdown AST node interface for AstroMarkdown.astro
     * - Supports both Markdown (MDAST) and HTML (HAST) element nodes.
     * - See remark/rehype AST docs for more details.
     */
    node: {
        type: string;
        value?: string;
        lang?: string; // <-- Added for code blocks
        children?: any[];
        url?: string;
        depth?: number;
        label?: string; // Added for footnoteReference nodes
        data?: {
            hProperties?: Record<string, any>;
            isMermaid?: boolean;
            mermaidId?: string;
        };
        // --- HAST element node support ---
        tagName?: string;
        properties?: Record<string, any>;
    };
    data: {
        path: string;
        id?: string;  // File ID (e.g., 'Agile.md')
        [key: string]: any;
    };
}

const {node, data, mermaidSvgs = {}} = Astro.props;

// ...
// [Rendering logic for all node types, including explicit handling for all common HAST tags.]
// ...
// Mermaid code block handler:
{node.type === "code" && node.lang === "mermaid" && (
  node.data?.isMermaid && node.data?.mermaidId && mermaidSvgs && mermaidSvgs[node.data.mermaidId]
    ? <div class="mermaid-diagram" set:html={mermaidSvgs[node.data.mermaidId]} />
    : <div class="mermaid-error">
        ⚠️ Mermaid diagram could not be rendered.
      </div>
)}
// HAST SVG handler:
{node.type === "element" && node.tagName === "svg" && (
  <svg {...node.properties}>
    {node.children && node.children.map(child => <Astro.self node={child} data={data} mermaidSvgs={mermaidSvgs} />)}
  </svg>
)}
// ...repeat for all relevant tags: p, span, div, ul, ol, li, table, etc.

/**
 * rehype-mermaid-inline.ts
 *
 * Custom rehype plugin to replace tagged Mermaid codeblocks (with unique IDs) with their corresponding SVGs after rehypeMermaid runs.
 * This ensures SVGs are rendered inline at the original codeblock position.
 *
 * Usage: .use(rehypeMermaidInline)
 *
 * This plugin expects that codeblocks have a `data-mermaid-id` property, and that the SVGs generated by rehypeMermaid are present in the HAST.
 */

import type { Root, Element } from 'hast';
import { visit } from 'unist-util-visit';

function buildSvgMap(tree: Root): Record<string, Element> {
  const svgMap: Record<string, Element> = {};
  visit(tree, 'element', (node: Element) => {
    if (node.tagName === 'svg' && node.properties && node.properties['data-mermaid-id']) {
      svgMap[node.properties['data-mermaid-id'] as string] = node;
    }
  });
  return svgMap;
}

export default function rehypeMermaidInline() {
  return (tree: Root) => {
    const svgMap = buildSvgMap(tree);
    visit(tree, 'element', (node: Element, index, parent) => {
      if (
        node.tagName === 'pre' &&
        node.children &&
        node.children[0] &&
        (node.children[0] as Element).tagName === 'code' &&
        (node.children[0] as Element).properties &&
        (node.children[0] as Element).properties['data-mermaid-id']
      ) {
        const mermaidId = (node.children[0] as Element).properties['data-mermaid-id'] as string;
        const svg = svgMap[mermaidId];
        if (svg && parent && typeof index === 'number') {
          parent.children[index] = svg;
        }
      }
    });
  };
}

/**
 * remark-mermaid-tag.ts
 *
 * Custom remark plugin to tag Mermaid codeblocks in the Markdown AST (MDAST).
 * Adds a unique identifier and a flag to each Mermaid codeblock for downstream processing.
 *
 * Usage: .use(remarkMermaidTag)
 */

import type { Node } from 'unist';
import { visit } from 'unist-util-visit';

let mermaidCounter = 0;

function generateUniqueId(): string {
  return `mermaid-${Date.now()}-${mermaidCounter++}`;
}

export default function remarkMermaidTag() {
  return (tree: Node) => {
    visit(tree, 'code', (node: any) => {
      if (node.lang === 'mermaid') {
        if (!node.data) node.data = {};
        node.data.isMermaid = true;
        node.data.mermaidId = generateUniqueId();
      }
    });
  };
}

---
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkBacklinks from '@utils/markdown/remark-backlinks';
import remarkImages from '@utils/markdown/remark-images';
import remarkCallouts from '@utils/markdown/remark-callout-handler';
import remarkCitations from '@utils/markdown/remark-citations';
import DebugMarkdown from '@components/markdown/DebugMarkdown.astro';
import { markdownDebugger } from '@utils/markdown/markdownDebugger';
import remarkRehype from 'remark-rehype';
import rehypeMermaid from 'rehype-mermaid';
import rehypeStringify from 'rehype-stringify';
import remarkMermaidTag from '@utils/markdown/remark-mermaid-tag';
import rehypeMermaidInline from '@utils/markdown/rehype-mermaid-inline';
import { visit } from 'unist-util-visit';
import { fromHtml } from 'hast-util-from-html';
import { toHtml } from 'hast-util-to-html';

// ...
// [Helper: rehypePreserveMermaidId, interpolateMermaidVariables, and pipeline setup.]
// ...
const processor = unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkImages)
  .use(remarkBacklinks)
  // .use(remarkCallouts)
  .use(remarkCitations)
  .use(remarkMermaidTag)
  .use(remarkRehype)
  .use(rehypePreserveMermaidId)
  .use(rehypeMermaid, { mermaidConfig: { theme: 'dark', themeVariables: { fontFamily: 'var(--ff-body, Arial, sans-serif)', background: 'transparent' }}})
  .use(rehypeMermaidInline)
  .use(rehypeStringify);
// ...