Excalidraw to SVG component

[oripka]

This converts excalidraw files to SVG. It takes care of inverting colors for darkmode using utility classes. It requires the @excalidraw/utils package.

ExcalidrawSvg.vue

<template>
  <div class="mx-auto">
    <div class="excalidraw" v-html="svg"></div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { exportToSvg, exportToBlob } from "@excalidraw/utils";

const props = defineProps(["src", "fullscreen"]);

const svg = ref();

/* inverts black and white in dark mode */
function replaceFillAttributes(htmlString) {
  // Replace fill="#fffffff" in rect tags
  htmlString = htmlString.replace(/(<rect[^>]+)fill="#ffffff"/g, '$1class="fill-transparent"');

  // Replace fill="#000000" in text tags
  htmlString = htmlString.replace(/(<text[^>]+)fill="#000000"/g, '$1class="fill-black dark:fill-white"');

  // Replace fill="#000000" in path tags
  htmlString = htmlString.replace(/(<path[^>]+)stroke="#000000"/g, '$1class="stroke-black dark:stroke-white"');

  return htmlString;
}


onMounted(async () => {
  if (props.src) {
    let excalidrawResponse = await fetch(props.src);
    const jsonData = await excalidrawResponse.json();
    let svgObj = await exportToSvg(jsonData);
    let html = svgObj.outerHTML;

    if (props.fullscreen) {
      html = html
        .replace(/width="[^"]*"/, "width=890px")
        .replace(/height="[^"]*"/, "height=500px");
    } else {
      html = html.replace(/width="[^"]*"/, "").replace(/height="[^"]*"/, "");
    }

    html = replaceFillAttributes(html)
    svg.value = html;
  }
});
</script>
<style>
.excalidraw svg {
  @apply mx-auto;
}
</style>

Here is how to use it in markdown.

<ExcalidrawSvg src="/cysec/drawings/ioc.excalidraw" :fullscreen="false" class="w-220"/>