diff --git a/playground/CustomTest.tsx b/playground/CustomTest.tsx
new file mode 100644
index 00000000..87541b65
--- /dev/null
+++ b/playground/CustomTest.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+
+import { useExcalidraw } from "./ExcalidrawWrapper.tsx";
+import { Mermaid } from "./Mermaid.tsx";
+
+function CustomTest() {
+  const excalidraw = useExcalidraw();
+  const [parsedMermaid, setParsedMermaid] = React.useState<{
+    data: string | null;
+    error: string | null;
+    definition: string | null;
+  }>({
+    data: null,
+    error: null,
+    definition: null,
+  });
+
+  return (
+    <>
+      <form
+        onSubmit={async (event) => {
+          event.preventDefault();
+
+          const data = new FormData(event.target as HTMLFormElement);
+          const mermaidSyntax = data.get("mermaid-input") as string;
+
+          if (!mermaidSyntax) {
+            return;
+          }
+
+          try {
+            setParsedMermaid({
+              data: null,
+              definition: null,
+              error: null,
+            });
+
+            const { mermaid } = await excalidraw.translateMermaidToExcalidraw(
+              mermaidSyntax
+            );
+
+            setParsedMermaid({
+              data: JSON.stringify(mermaid, null, 2),
+              definition: mermaidSyntax,
+              error: null,
+            });
+          } catch (error) {
+            setParsedMermaid({
+              data: null,
+              definition: null,
+              error: String(error),
+            });
+          }
+        }}
+      >
+        <textarea
+          id="mermaid-input"
+          rows={10}
+          cols={50}
+          name="mermaid-input"
+          style={{ marginTop: "1rem" }}
+          placeholder="Input Mermaid Syntax"
+        />
+        <br />
+        <button type="submit" id="render-excalidraw-btn">
+          {"Render to Excalidraw"}
+        </button>
+      </form>
+
+      {parsedMermaid.definition && (
+        <Mermaid definition={parsedMermaid.definition} id="custom-diagram" />
+      )}
+
+      {parsedMermaid.data && (
+        <details id="parsed-data-details">
+          <summary>{"Parsed data from parseMermaid"}</summary>
+          <pre id="custom-parsed-data">{parsedMermaid.data}</pre>
+        </details>
+      )}
+
+      {parsedMermaid.error && <div id="error">{parsedMermaid.error}</div>}
+    </>
+  );
+}
+
+export default CustomTest;
diff --git a/playground/ExcalidrawWrapper.tsx b/playground/ExcalidrawWrapper.tsx
index c2cf339f..99c829a3 100644
--- a/playground/ExcalidrawWrapper.tsx
+++ b/playground/ExcalidrawWrapper.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useContext, useMemo } from "react";
 import {
   Excalidraw,
   convertToExcalidrawElements,
@@ -8,36 +8,113 @@ import {
   ExcalidrawImperativeAPI,
 } from "@excalidraw/excalidraw/types/types.js";
 import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform.js";
+import { parseMermaid } from "../src/parseMermaid";
+import { graphToExcalidraw } from "../src/graphToExcalidraw";
+import { DEFAULT_FONT_SIZE } from "../src/constants";
 
-interface ExcalidrawWrapperProps {
-  elements: ExcalidrawElementSkeleton[];
-  files?: BinaryFiles;
-}
+const ExcalidrawContext = React.createContext<{
+  excalidrawAPI?: ExcalidrawImperativeAPI;
+  addFiles: (files: BinaryFiles) => void;
+  updateElements: (elements: ExcalidrawElementSkeleton[]) => void;
+  translateMermaidToExcalidraw: (mermaidSyntax: any) => Promise<{
+    mermaid: ReturnType<typeof parseMermaid>;
+    excalidraw: { elements: ExcalidrawElementSkeleton[]; files: BinaryFiles };
+  }>;
+  setApi: (api: ExcalidrawImperativeAPI) => void;
+} | null>(null);
 
-const ExcalidrawWrapper = (props: ExcalidrawWrapperProps) => {
-  const [excalidrawAPI, setExcalidrawAPI] =
-    React.useState<ExcalidrawImperativeAPI | null>(null);
+export const useExcalidraw = () => {
+  const context = useContext(ExcalidrawContext);
 
-  React.useEffect(() => {
-    if (!props.elements || !excalidrawAPI) {
-      return;
-    }
+  if (!context) {
+    throw new Error("useExcalidraw must be used within a ExcalidrawProvider");
+  }
+
+  return context;
+};
+
+export const ExcalidrawProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const excalidrawAPI = React.useRef<ExcalidrawImperativeAPI>();
+
+  const updateElements = useCallback(
+    (elements: ExcalidrawElementSkeleton[]) => {
+      if (!excalidrawAPI.current) {
+        return;
+      }
 
-    excalidrawAPI.updateScene({
-      elements: convertToExcalidrawElements(props.elements),
-    });
-    excalidrawAPI.scrollToContent(excalidrawAPI.getSceneElements(), {
-      fitToContent: true,
-    });
-  }, [props.elements]);
+      excalidrawAPI.current.updateScene({
+        elements: convertToExcalidrawElements(elements),
+      });
 
-  React.useEffect(() => {
-    if (!props.files || !excalidrawAPI) {
+      excalidrawAPI.current.scrollToContent(
+        excalidrawAPI.current.getSceneElements(),
+        {
+          fitToContent: true,
+        }
+      );
+    },
+    []
+  );
+
+  const addFiles = useCallback((files: BinaryFiles) => {
+    if (!excalidrawAPI.current) {
       return;
     }
 
-    excalidrawAPI.addFiles(Object.values(props.files));
-  }, [props.files]);
+    excalidrawAPI.current.addFiles(Object.values(files));
+  }, []);
+
+  const setApi = useCallback((api: ExcalidrawImperativeAPI) => {
+    excalidrawAPI.current = api;
+  }, []);
+
+  const translateMermaidToExcalidraw = useCallback(
+    async (mermaidSyntax: string) => {
+      if (!excalidrawAPI.current) {
+        return;
+      }
+
+      const mermaid = await parseMermaid(mermaidSyntax);
+
+      const { elements, files } = graphToExcalidraw(mermaid, {
+        fontSize: DEFAULT_FONT_SIZE,
+      });
+
+      updateElements(elements);
+
+      if (files) {
+        addFiles(files);
+      }
+
+      return { mermaid, excalidraw: { elements, files } };
+    },
+    [updateElements, addFiles]
+  );
+
+  const context = useMemo(
+    () => ({
+      excalidrawAPI: excalidrawAPI.current,
+      addFiles,
+      updateElements,
+      setApi,
+      translateMermaidToExcalidraw,
+    }),
+    [addFiles, updateElements, setApi, translateMermaidToExcalidraw]
+  );
+
+  return (
+    <ExcalidrawContext.Provider value={context}>
+      {children}
+    </ExcalidrawContext.Provider>
+  );
+};
+
+const ExcalidrawWrapper = () => {
+  const excalidraw = useExcalidraw();
 
   return (
     <div className="excalidraw-wrapper">
@@ -48,7 +125,7 @@ const ExcalidrawWrapper = (props: ExcalidrawWrapperProps) => {
             currentItemFontFamily: 1,
           },
         }}
-        excalidrawAPI={(api) => setExcalidrawAPI(api)}
+        excalidrawAPI={excalidraw?.setApi}
       />
     </div>
   );
diff --git a/playground/Mermaid.tsx b/playground/Mermaid.tsx
new file mode 100644
index 00000000..6dbd1bfd
--- /dev/null
+++ b/playground/Mermaid.tsx
@@ -0,0 +1,32 @@
+import mermaid from "mermaid";
+import React from "react";
+
+interface MermaidProps {
+  id: string;
+  definition: string;
+}
+
+export function Mermaid({ definition, id }: MermaidProps) {
+  const [svg, setSvg] = React.useState("");
+  const [, startTransition] = React.useTransition();
+
+  React.useEffect(() => {
+    const render = async (id: string, definition: string) => {
+      startTransition(() => {
+        mermaid.render(`mermaid-diagram-${id}`, definition).then(({ svg }) => {
+          setSvg(svg);
+        });
+      });
+    };
+
+    render(id, definition);
+  }, [definition, id]);
+
+  return (
+    <div
+      style={{ width: "50%" }}
+      className="mermaid"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}
diff --git a/playground/Testcases.tsx b/playground/Testcases.tsx
new file mode 100644
index 00000000..89082f2f
--- /dev/null
+++ b/playground/Testcases.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+
+import { FLOWCHART_DIAGRAM_TESTCASES } from "./testcases/flowchart";
+import { SEQUENCE_DIAGRAM_TESTCASES } from "./testcases/sequence.ts";
+import { CLASS_DIAGRAM_TESTCASES } from "./testcases/class.ts";
+import { UNSUPPORTED_DIAGRAM_TESTCASES } from "./testcases/unsupported.ts";
+import { useExcalidraw } from "./ExcalidrawWrapper.tsx";
+import { Mermaid } from "./Mermaid";
+
+interface TestCaseProps {
+  name: string;
+  baseId: string;
+  testcases: { name: string; definition: string }[];
+}
+
+function Testcase({ name, baseId, testcases }: TestCaseProps) {
+  const excalidraw = useExcalidraw();
+  const activeTestcase = React.useRef<number>();
+
+  React.useEffect(() => {
+    const testcase = activeTestcase.current;
+
+    if (testcase !== undefined) {
+      const { definition } = testcases[testcase];
+
+      excalidraw.translateMermaidToExcalidraw(definition);
+    }
+  }, [excalidraw.translateMermaidToExcalidraw, testcases]);
+
+  return (
+    <>
+      <h2>{`${name} Diagrams`}</h2>
+      <details>
+        <summary>{`${name} Examples`}</summary>
+        <div id={`${baseId}-container`}>
+          {testcases.map(({ name, definition }, index) => {
+            const id = `${baseId}-${index}`;
+
+            return (
+              <div key={id}>
+                <h2 style={{ marginTop: "50px", color: "#f06595" }}>{name}</h2>
+
+                <pre
+                  style={{
+                    fontSize: "16px",
+                    fontWeight: "600",
+                    fontStyle: "italic",
+                    background: "#eeeef1",
+                    whiteSpace: "pre-wrap",
+                    width: "45vw",
+                    padding: "5px",
+                  }}
+                >
+                  {definition}
+                </pre>
+
+                <button
+                  onClick={() => {
+                    excalidraw.translateMermaidToExcalidraw(definition);
+                    activeTestcase.current = index;
+                  }}
+                >
+                  {"Render to Excalidraw"}
+                </button>
+
+                <Mermaid definition={definition} id={id} />
+              </div>
+            );
+          })}
+        </div>
+      </details>
+    </>
+  );
+}
+
+function Testcases() {
+  return (
+    <>
+      <Testcase
+        name="Flowchart"
+        baseId="flowchart"
+        testcases={FLOWCHART_DIAGRAM_TESTCASES}
+      />
+
+      <Testcase
+        name="Sequence"
+        baseId="sequence"
+        testcases={SEQUENCE_DIAGRAM_TESTCASES}
+      />
+
+      <Testcase
+        name="Class"
+        baseId="class"
+        testcases={CLASS_DIAGRAM_TESTCASES}
+      />
+
+      <Testcase
+        name="Unsupported"
+        baseId="unsupported"
+        testcases={UNSUPPORTED_DIAGRAM_TESTCASES}
+      />
+    </>
+  );
+}
+
+export default Testcases;
diff --git a/playground/index.html b/playground/index.html
index 7bcfeb27..bf3505c2 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -5,73 +5,8 @@
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="style.scss" />
   </head>
-
   <body>
-    <section id="custom-test">
-      <h1>Custom Test</h1>
-      Supports only
-      <a target="_blank" href="https://mermaid.js.org/syntax/flowchart.html"
-        >Flowchart</a
-      >
-
-      <a
-        target="_blank"
-        href="https://mermaid.js.org/syntax/sequenceDiagram.html"
-      >
-        Sequence
-      </a>
-      and
-      <a target="_blank" href="https://mermaid.js.org/syntax/classDiagram.html">
-        class </a
-      >diagrams.
-      <br />
-      <textarea
-        id="mermaid-input"
-        rows="10"
-        cols="50"
-        style="margin-top: 1rem"
-        placeholder="Input Mermaid Syntax"
-      ></textarea
-      ><br />
-      <button id="render-excalidraw-btn">Render to Excalidraw</button>
-      <div id="custom-diagram"></div>
-      <details id="parsed-data-details">
-        <summary>Parsed data from parseMermaid</summary>
-        <pre id="custom-parsed-data"></pre>
-      </details>
-      <div id="error"></div>
-    </section>
-
-    <img
-      src="./images/spinner.gif"
-      alt="Loading Spinner"
-      id="diagram-loading-spinner"
-      width="50"
-    />
-    <h2>Flowchart Diagrams</h2>
-    <details>
-      <summary>Flowchart Examples</summary>
-      <div id="flowchart-container"></div>
-    </details>
-
-    <h2>Sequence Diagrams</h2>
-    <details>
-      <summary>Sequence Diagram Examples</summary>
-      <div id="sequence-container"></div>
-    </details>
-
-    <h2>Class Diagrams</h2>
-    <details>
-      <summary>Class Diagram Examples</summary>
-      <div id="class-container"></div>
-    </details>
-
-    <h2 style="margin-top: 50px">Unsupported diagrams</h2>
-    <details>
-      <summary>Unsupported Diagram Examples</summary>
-      <div id="unsupported"></div>
-    </details>
-
-    <script type="module" src="index.ts"></script>
+    <div id="root"></div>
+    <script type="module" src="main.tsx"></script>
   </body>
 </html>
diff --git a/playground/index.ts b/playground/index.ts
deleted file mode 100644
index db84de08..00000000
--- a/playground/index.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-import mermaid from "mermaid";
-import { parseMermaid } from "../src/parseMermaid.ts";
-import { FLOWCHART_DIAGRAM_TESTCASES } from "./testcases/flowchart.ts";
-import { SEQUENCE_DIAGRAM_TESTCASES } from "./testcases/sequence.ts";
-import { CLASS_DIAGRAM_TESTCASES } from "./testcases/class.ts";
-import { UNSUPPORTED_DIAGRAM_TESTCASES } from "./testcases/unsupported.ts";
-import "./initCustomTest.ts";
-import { renderExcalidraw } from "./initExcalidraw.tsx";
-import { DEFAULT_FONT_SIZE, MERMAID_CONFIG } from "../src/constants.ts";
-import { EXCALIDRAW_ACTIVE_ATTR, EXCALIDRAW_WRAPPER_ID } from "./constants.ts";
-
-// Initialize Mermaid
-mermaid.initialize({
-  ...MERMAID_CONFIG,
-  themeVariables: {
-    fontSize: `${DEFAULT_FONT_SIZE}px`,
-  },
-});
-
-const flowchartContainer = document.getElementById("flowchart-container")!;
-const sequenceContainer = document.getElementById("sequence-container")!;
-const classContainer = document.getElementById("class-container")!;
-const unsupportedContainer = document.getElementById("unsupported")!;
-const spinner = document.getElementById("diagram-loading-spinner")!;
-unsupportedContainer.innerHTML = `
-    <p>Unsupported diagram will be rendered as SVG image.</p>
-  `;
-
-(async () => {
-  // Render flowchart diagrams
-  await Promise.all(
-    FLOWCHART_DIAGRAM_TESTCASES.map(async ({ name, definition }, index) => {
-      await renderDiagram(
-        flowchartContainer,
-        name,
-        definition,
-        index,
-        "flowchart"
-      );
-    })
-  );
-  // Render Sequence diagrams
-  await Promise.all(
-    SEQUENCE_DIAGRAM_TESTCASES.map(({ name, definition }, index) => {
-      return renderDiagram(
-        sequenceContainer,
-        name,
-        definition,
-        index,
-        "sequence"
-      );
-    })
-  );
-
-  // Render Class diagrams
-  await Promise.all(
-    CLASS_DIAGRAM_TESTCASES.map(({ name, definition }, index) => {
-      return renderDiagram(classContainer, name, definition, index, "class");
-    })
-  );
-
-  // Render unsupported diagrams
-  await Promise.all(
-    UNSUPPORTED_DIAGRAM_TESTCASES.map(async (testcase, index) => {
-      const { name, definition } = testcase;
-
-      await renderDiagram(
-        unsupportedContainer,
-        name,
-        definition,
-        index,
-        "unsupported"
-      );
-    })
-  );
-
-  spinner.style.display = "none";
-})();
-
-function generateDiagramId(base: string, number: number) {
-  return `${base}-${number}`;
-}
-
-async function handleRenderExcalidraw(id: string, definition: string) {
-  const data = await parseMermaid(definition);
-
-  // In HMR we use this attribute to trigger a rerender for active test case for Excalidraw
-  const excalidraw = document.getElementById(EXCALIDRAW_WRAPPER_ID);
-  excalidraw?.setAttribute(EXCALIDRAW_ACTIVE_ATTR, id);
-
-  renderExcalidraw(JSON.stringify(data));
-}
-
-async function renderDiagram(
-  containerEl: HTMLElement,
-  name: string,
-  diagramDefinition: string,
-  i: number,
-  baseId: string
-) {
-  const id = generateDiagramId(baseId, i);
-
-  const diagramContainerEl = document.createElement("div");
-  diagramContainerEl.setAttribute("id", `diagram-container-${id}`);
-  diagramContainerEl.innerHTML = `<h2 id="diagram-title-${id}" style="margin-top: 50px; color:#f06595;">${name}
-  </h2>
-  
-  <pre style="font-size:16px; font-weight:600;font-style:italic;background:#eeeef1;white-space:pre-wrap;width:45vw;padding:5px" id="mermaid-syntax-${id}"></pre>
-
-  <button id="diagram-btn-${id}" data="${id}">Render to Excalidraw</button>
-  <div id="diagram-${id}" style="width:50%"></div>`;
-
-  const btn = diagramContainerEl.querySelector(`#diagram-btn-${id}`)!;
-
-  btn.addEventListener("click", () =>
-    handleRenderExcalidraw(id, diagramDefinition)
-  );
-
-  const diagramEl = diagramContainerEl.querySelector(`#diagram-${id}`)!;
-  const { svg } = await mermaid.render(`diagram-${id}`, diagramDefinition);
-
-  diagramEl.innerHTML = svg;
-  containerEl.append(diagramContainerEl);
-
-  // Render mermaid syntax
-  const mermaidSyntaxEl = diagramContainerEl.querySelector(
-    `#mermaid-syntax-${id}`
-  )!;
-  mermaidSyntaxEl.innerHTML = diagramDefinition;
-}
-
-async function updateDiagram(
-  name: string,
-  diagramDefinition: string,
-  index: number,
-  baseId: string
-) {
-  const id = generateDiagramId(baseId, index);
-
-  const diagramContainerEl = document.getElementById(
-    `diagram-container-${id}`
-  )!;
-  const diagramEl = document.getElementById(`diagram-${id}`)!;
-  const titleEl = document.getElementById(`diagram-title-${id}`)!;
-  const { svg } = await mermaid.render(`diagram-${id}`, diagramDefinition);
-  const mermaidSyntaxEl = document.getElementById(`mermaid-syntax-${id}`)!;
-  const btn = document.getElementById(`diagram-btn-${id}`)!;
-
-  // This allows us to remove all anonymous events listeners from btn
-  const btnClone = btn.cloneNode(true);
-
-  btnClone.addEventListener("click", () =>
-    handleRenderExcalidraw(id, diagramDefinition)
-  );
-
-  btn.replaceWith(btnClone);
-  titleEl.textContent = name;
-  diagramEl.innerHTML = svg;
-  diagramContainerEl.append(diagramEl);
-  mermaidSyntaxEl.innerHTML = diagramDefinition;
-}
-
-if (import.meta.hot) {
-  function hmrUpdateTestcase(
-    baseId: string,
-    newTestCases: { name: string; definition: string }[]
-  ) {
-    if (!newTestCases) {
-      return import.meta.hot?.invalidate();
-    }
-
-    for (let i = 0; i < newTestCases.length; i++) {
-      const { name, definition } = newTestCases[i];
-
-      const excalidraw = document.getElementById(EXCALIDRAW_WRAPPER_ID);
-
-      if (
-        excalidraw?.getAttribute(EXCALIDRAW_ACTIVE_ATTR) ===
-        generateDiagramId(baseId, i)
-      ) {
-        parseMermaid(definition).then((data) => {
-          renderExcalidraw(JSON.stringify(data));
-        });
-      }
-
-      updateDiagram(name, definition, i, baseId);
-    }
-  }
-
-  import.meta.hot.accept("./testcases/flowchart.ts", (newModule) =>
-    hmrUpdateTestcase("flowchart", newModule?.FLOWCHART_DIAGRAM_TESTCASES)
-  );
-
-  import.meta.hot.accept("./testcases/class.ts", (newModule) =>
-    hmrUpdateTestcase("class", newModule?.CLASS_DIAGRAM_TESTCASES)
-  );
-
-  import.meta.hot.accept("./testcases/sequence.ts", (newModule) =>
-    hmrUpdateTestcase("sequence", newModule?.SEQUENCE_DIAGRAM_TESTCASES)
-  );
-
-  import.meta.hot.accept("./testcases/unsupported.ts", (newModule) =>
-    hmrUpdateTestcase("unsupported", newModule?.UNSUPPORTED_DIAGRAM_TESTCASES)
-  );
-}
diff --git a/playground/index.tsx b/playground/index.tsx
new file mode 100644
index 00000000..f86bd922
--- /dev/null
+++ b/playground/index.tsx
@@ -0,0 +1,41 @@
+import CustomTest from "./CustomTest.tsx";
+import ExcalidrawWrapper, { ExcalidrawProvider } from "./ExcalidrawWrapper.tsx";
+import Testcases from "./Testcases.tsx";
+
+function App() {
+  return (
+    <ExcalidrawProvider>
+      <section id="custom-test">
+        <h1>{"Custom Test"}</h1>
+        {"Supports only "}
+        <a target="_blank" href="https://mermaid.js.org/syntax/flowchart.html">
+          {"Flowchart"}
+        </a>{" "}
+        <a
+          target="_blank"
+          href="https://mermaid.js.org/syntax/sequenceDiagram.html"
+        >
+          {"Sequence "}
+        </a>
+        {"and "}
+        <a
+          target="_blank"
+          href="https://mermaid.js.org/syntax/classDiagram.html"
+        >
+          {"class "}
+        </a>
+        {"diagrams."}
+        <br />
+        <CustomTest />
+      </section>
+
+      <Testcases />
+
+      <div id="excalidraw">
+        <ExcalidrawWrapper />
+      </div>
+    </ExcalidrawProvider>
+  );
+}
+
+export default App;
diff --git a/playground/initCustomTest.ts b/playground/initCustomTest.ts
deleted file mode 100644
index 9cd5aba3..00000000
--- a/playground/initCustomTest.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import mermaid from "mermaid";
-import { parseMermaid } from "../src/parseMermaid.ts";
-import { renderExcalidraw } from "./initExcalidraw.tsx";
-
-const customTestEl = document.getElementById("custom-test")!;
-const btn = document.getElementById("render-excalidraw-btn")!;
-const errorEl = customTestEl.querySelector("#error")!;
-
-// Handle render to Excalidraw event
-btn.addEventListener("click", async () => {
-  errorEl.setAttribute("style", "display: none");
-
-  try {
-    const mermaidInput = document.getElementById(
-      "mermaid-input"
-    ) as HTMLInputElement;
-
-    const diagramDefinition = mermaidInput.value;
-
-    // Render Mermaid diagram
-    const diagramEl = document.getElementById("custom-diagram")!;
-    const { svg } = await mermaid.render("custom-digaram", diagramDefinition);
-    diagramEl.innerHTML = svg;
-
-    // Parse Mermaid diagram and render to Excalidraw
-    const parsedData = await parseMermaid(diagramDefinition);
-
-    const parsedDataEl = document.getElementById("custom-parsed-data")!;
-    parsedDataEl.parentElement!.style.display = "block";
-    parsedDataEl.innerText = JSON.stringify(parsedData, null, 2);
-
-    renderExcalidraw(JSON.stringify(parsedData));
-  } catch (e) {
-    errorEl.setAttribute("style", "display: block");
-    errorEl.innerHTML = String(e);
-    console.error("Custom Test Error:", e);
-  }
-});
diff --git a/playground/initExcalidraw.tsx b/playground/initExcalidraw.tsx
deleted file mode 100644
index e3daeaaf..00000000
--- a/playground/initExcalidraw.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import ExcalidrawWrapper from "./ExcalidrawWrapper.tsx";
-import { graphToExcalidraw } from "../src/graphToExcalidraw.ts";
-import { DEFAULT_FONT_SIZE } from "../src/constants.ts";
-import { EXCALIDRAW_WRAPPER_ID } from "./constants.ts";
-
-// Create Excalidraw Wrapper element
-const excalidrawWrapper = document.createElement("div");
-excalidrawWrapper.id = EXCALIDRAW_WRAPPER_ID;
-document.body.appendChild(excalidrawWrapper);
-
-// Init Excalidraw
-const root = ReactDOM.createRoot(excalidrawWrapper);
-root.render(<ExcalidrawWrapper elements={[]} />);
-
-// Render to Excalidraw
-export const renderExcalidraw = (
-  mermaidGraphDataString: string,
-  fontSize = DEFAULT_FONT_SIZE
-) => {
-  const mermaidGraphData = JSON.parse(mermaidGraphDataString);
-  const { elements, files } = graphToExcalidraw(mermaidGraphData, { fontSize });
-
-  console.info("renderExcalidraw", elements);
-
-  root.render(<ExcalidrawWrapper elements={elements} files={files} />);
-};
diff --git a/playground/main.tsx b/playground/main.tsx
new file mode 100644
index 00000000..bb38d06f
--- /dev/null
+++ b/playground/main.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./index.tsx";
+import mermaid from "mermaid";
+import { DEFAULT_FONT_SIZE, MERMAID_CONFIG } from "../src/constants.ts";
+
+// Initialize Mermaid
+mermaid.initialize({
+  ...MERMAID_CONFIG,
+  themeVariables: {
+    fontSize: `${DEFAULT_FONT_SIZE}px`,
+  },
+});
+
+const root = ReactDOM.createRoot(document.getElementById("root")!);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/playground/style.scss b/playground/style.scss
index 0a0ba081..bc2a673f 100644
--- a/playground/style.scss
+++ b/playground/style.scss
@@ -6,6 +6,7 @@ body {
     max-width: 48%;
   }
 }
+
 button {
   height: 40px;
   font-size: 16px;
@@ -16,6 +17,7 @@ button {
   color: white;
   cursor: pointer;
 }
+
 #excalidraw {
   width: 50vw;
   height: 100vh;
@@ -46,11 +48,9 @@ button {
 
   #parsed-data-details {
     margin-top: 20px;
-    display: none;
   }
 
   #error {
-    display: none;
     color: red;
     margin-top: 20px;
   }