feat: mermaid graphs in markdown (#1514)

packages/ui/app/package.json

@@ -82,6 +82,7 @@
     "jsonpath": "^1.1.1",
     "launchdarkly-js-client-sdk": "^3.4.0",
     "mdx-bundler": "^10.0.2",
+    "mermaid": "^11.2.1",
     "moment": "^2.30.1",
     "next": "npm:@fern-api/[email protected]",
     "next-mdx-remote": "^5.0.0",

packages/ui/app/src/mdx/components/index.tsx

@@ -29,6 +29,7 @@ import { Frame } from "./frame";
 import { A, HeadingRenderer, Image, Li, Ol, Strong, Ul } from "./html";
 import { Table } from "./html-table";
 import { IFrame } from "./iframe";
+import { Mermaid } from "./mermaid";
 import { ParamField } from "./mintlify";
 import { ReferenceLayoutAside, ReferenceLayoutMain } from "./reference-layout";
 import { EndpointRequestSnippet, EndpointResponseSnippet } from "./snippets";
@@ -59,6 +60,7 @@ const FERN_COMPONENTS = {
     Frame,
     Icon: RemoteFontAwesomeIcon,
     LaunchDarkly,
+    Mermaid,
     ParamField,
     Step,
     StepGroup,

packages/ui/app/src/mdx/components/mermaid/Mermaid.tsx

@@ -0,0 +1,32 @@
+import { ReactElement, useEffect, useRef, useState } from "react";
+import { useTheme } from "../../../atoms";
+
+export function Mermaid({ children }: { children: string }): ReactElement {
+    if (typeof window === "undefined" || typeof children !== "string") {
+        return <div />;
+    }
+
+    return <MermaidInternal code={children} />;
+}
+
+function MermaidInternal({ code }: { code: string }): ReactElement {
+    const ref = useRef<HTMLDivElement>(null);
+    const [svg, setSvg] = useState<string>();
+    const theme = useTheme();
+
+    useEffect(() => {
+        void (async () => {
+            const mermaid = await import("mermaid").then((m) => m.default);
+
+            if (ref.current) {
+                mermaid.initialize({
+                    theme: theme === "dark" ? "dark" : "default",
+                });
+                const result = await mermaid.render("mermaid-svg", code, ref.current);
+                setSvg(result.svg);
+            }
+        })();
+    }, [code, theme]);
+
+    return <div ref={ref} dangerouslySetInnerHTML={svg != null ? { __html: svg } : undefined} />;
+}

packages/ui/app/src/mdx/components/mermaid/index.ts

@@ -0,0 +1 @@
+export * from "./Mermaid";

packages/ui/app/src/mdx/plugins/rehypeFernCode.ts

@@ -81,6 +81,17 @@ export function rehypeFernCode(): (tree: Root) => void {
                     }
 
                     const meta = parseBlockMetaString(head, "plaintext");
+
+                    if (meta.lang === "mermaid") {
+                        parent?.children.splice(index, 1, {
+                            type: "mdxJsxFlowElement",
+                            name: "Mermaid",
+                            attributes: [],
+                            children: [{ type: "text", value: code }],
+                        });
+                        return;
+                    }
+
                     const props: FernSyntaxHighlighterProps = {
                         code,
                         language: meta.lang,