mirror of
https://github.com/Fission-AI/OpenSpec.git
synced 2026-09-14 20:16:53 +08:00
Clay Good
4e4c9e1ffd
* docs(workflows): add lifecycle diagrams * docs(workflows): clarify optional archive paths * docs(workflows): correct lifecycle diagrams * docs(website): render Mermaid diagrams * fix(website): preserve Mermaid label text
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { renderMermaidSVG } from 'beautiful-mermaid';
|
|
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
|
|
|
|
export function Mermaid({ chart }: { chart: string }) {
|
|
try {
|
|
// beautiful-mermaid injects remote font imports; the site already provides Inter.
|
|
const svg = renderMermaidSVG(chart, {
|
|
bg: 'var(--color-fd-background)',
|
|
fg: 'var(--color-fd-foreground)',
|
|
transparent: true,
|
|
}).replace(/^\s*@import url\(['"]https:\/\/fonts\.googleapis\.com\/[^)]*\);\s*$/m, '');
|
|
|
|
return (
|
|
<figure>
|
|
<div
|
|
aria-label="Scrollable Mermaid diagram"
|
|
className="overflow-x-auto"
|
|
role="region"
|
|
tabIndex={0}
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
className="[&_svg]:h-auto [&_svg]:max-w-full [&_svg]:min-w-[40rem]"
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
</div>
|
|
<figcaption className="sr-only">Mermaid diagram source: {chart}</figcaption>
|
|
</figure>
|
|
);
|
|
} catch {
|
|
return (
|
|
<CodeBlock title="Mermaid">
|
|
<Pre>{chart}</Pre>
|
|
</CodeBlock>
|
|
);
|
|
}
|
|
}
|