@bobril/mermaid

Bobril Mermaid Component

Demo

How to use

It must be wrapped by Suspense and ErrorBoundary (just good to have) components.

import * as b from "bobril";
import * as mermaid from "@bobril/mermaid";

b.init(() => (
    <b.ErrorBoundary fallback={(e) => <div>Error occurred {e.message}</div>}>
        <b.Suspense fallback={<div>Rendering...</div>}>
            <mermaid.Mermaid>{`graph TD; A-->B;`}</mermaid.Mermaid>
        </b.Suspense>
    </b.ErrorBoundary>
));

Global settings

import * as mermaid from "@bobril/mermaid";

mermaid.setTheme("dark");
mermaid.setSecurityLevel("loose");
mermaid.setLogLevel(5);
mermaid.setDarkMode(true);

Props of component

• children?: string - only one string child is allowed and it must contain mermaid code to render
• style?: b.IBobrilStyle - optional style for the component

Acknowledges

• mermaid - actual ground work