Not a Propaganda Machine

    excalidraw-to-svg

    3.0.0 • Public • Published

    Excalidraw to SVG

    Node Library to transform excalidraw diagrams into svgs! Useful if you are storing excalidraw diagrams in repos and want a pipeline to export them.

    Note, this is a NodeJS library, if you want to get an svg in a web-app, use the @excalidraw/utils library.

    Please consider supporting Excalidraw by getting Excalidraw Plus!

    Usage

    CLI

    You can run this package as a CLI tool by using npx (or if you have it installed as a node dependency). It takes in two arguments, the path to the diagram you want to convert, and the output path (which can either be an exact path, or folder).

    Note, this version returns a string version of the element (an artifact of .outerHTML), if you want to interact with the svg node elements, use the API below.

    npx excalidraw-to-svg ./diagrams/example.excalidraw ./output

    API

    You can install this package as a dependency for a project, and have it build svgs on the JSON files or objects. Note, this function returns a DOM element, so if you want a string, use .outerHTML to get the string content.

    const excalidrawToSvg = require("excalidrawToSvg");
    const excalidrawDiagram = {
      type: "excalidraw",
      version: 2,
      source: "https://excalidraw.com",
      elements: [
        {
          id: "vWrqOAfkind2qcm7LDAGZ",
          type: "ellipse",
          x: 414,
          y: 237,
          width: 214,
          height: 214,
          angle: 0,
          strokeColor: "#000000",
          backgroundColor: "#15aabf",
          fillStyle: "hachure",
          strokeWidth: 1,
          strokeStyle: "solid",
          roughness: 1,
          opacity: 100,
          groupIds: [],
          strokeSharpness: "sharp",
          seed: 1041657908,
          version: 120,
          versionNonce: 1188004276,
          isDeleted: false,
          boundElementIds: null,
        },
      ],
      appState: {
        viewBackgroundColor: "#ffffff",
        gridSize: null,
      },
    };
    
    const diagramSvg = await excalidrawToSvg(excalidrawDiagram);
    console.log(diagram.outerHTML);

    Why?

    In order to expose diagrams in an interactive web interface, you may want to expose excalidraw diagrams as svgs. This might be useful in a larger toolchain that also injects links and other meta data into a web interface.

    Install

    npm i excalidraw-to-svg

    DownloadsWeekly Downloads

    105

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    30.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • jrjurman