timmmm / excalidraw_export Goto Github PK

CLI to export Excalidraw drawings to SVG and PDF with working fonts.

JavaScript 100.00%

excalidraw_export's Introduction

excalidraw_export

This is a simple Node package to export Excalidraw drawings to SVG, and optionally PDF (requires rsvg-convert).

Install

npm install --global excalidraw_export

Use

Simplest is as follows.

excalidraw_export foo.excalidraw bar.excalidraw

This will create two files: foo.excalidraw.svg and bar.excalidraw.svg.

If you have rsvg-convert installed, and you additionally want PDF files use

excalidraw_export --pdf foo.excalidraw bar.excalidraw

This will also generate foo.excalidraw.pdf and bar.excalidraw.pdf.

Fonts

Unfortunately the font situation is a bit of a mess. Excalidraw uses two fonts - Virgil and Cascadia. By default it references them using CSS like this:

<defs>
  <style>
    @font-face {
      font-family: "Virgil";
      src: url("https://excalidraw.com/Virgil.woff2");
    }
    @font-face {
      font-family: "Cascadia";
      src: url("https://excalidraw.com/Cascadia.woff2");
    }
  </style>
</defs>
<text font-family="Virgil, Segoe UI Emoji" ...

This means the file is small, but now you need network access to use the fonts! Not great. So this tool provides a --embed-fonts option which will embed the fonts in the SVG (even if they aren't used). This increases the file size a bit (so you probably don't want to use it on the web) but it's good for e.g. HTML presentations.

Unfortunately there's a big downside of <style> @font-face. No SVG renderers except web browsers support CSS fonts in SVG. ImageMagick, rsvg-convert, Inkscape, etc. will all ignore it.

Therefore if you want to convert to PDF while retaining fonts you have to install the actual Virgil and Cascadia fonts on your system. Then rsvg-convert works fine.

However there is one minor snag - the actual fonts are called Virgil GS and Cascadia Code. So this tool has another option --rename-fonts which will change the font-familys like so:

<text font-family="Virgil SG, Segoe UI Emoji" ...

This lets it find the system font.

Troubleshooting

If you get an error like this:

npm ERR! ../src/Image.h:18:10: fatal error: 'gif_lib.h' file not found
npm ERR! #include <gif_lib.h>
npm ERR!          ^~~~~~~~~~~
npm ERR! 1 warning and 1 error generated.

See this thread for suggestions.

excalidraw_export's People

Contributors

Stargazers

Watchers

Forkers

anonimitoraf lululau vierpi zawatton21 deining albertored colawithsauce n8himmel

excalidraw_export's Issues

text multiline overlap: y is NaN

excalidraw_export -

in excalidraw

fragment in excalidraw_export svg

<g transform="translate(55.84522960436743 132) rotate(0 58.59375 24)">
<text x="0" y="NaN" font-family="Cascadia Code, Segoe UI Emoji" font-size="20px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr">
(the k
</text>
<text x="0" y="NaN" font-family="Cascadia Code, Segoe UI Emoji" font-size="20px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr">
is broken)
</text>
</g>

As y is NaN, when typing linebreak, lines will overlap.
This is not present in excalidraw's svg export, where y have value

fragment in excalidraw's svg export

<g transform="translate(78 122.82189569110017) rotate(0 51.5 36)">
<text x="0" y="19.400390625" font-family="Segoe UI Emoji" font-size="20px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">
(def a (b c)
</text>
...

Update version available on NPM

Hi,
super useful package :).

I am not exactly sure about the process, but a new version on npm would be nice.

When installing via npm install -g excalidraw_export, I am getting an error about canvas missing:

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

A recent commit seems to address this, but it's not included yet.

Error rendering edge-labels.

All files in a zip:
edge-labels-rendering-error-bug.zip.
Excalidraw shared link:
https://excalidraw.com/#json=dYmsl0r4MMuupw6J8mLch,7pC6x3aetcuFsfRsYo5CQQ.
Or as a file (had to zip it, github won't allow attaching .excalidraw
files):
volume_representations.zip.
Here is a screenshot of the diagram inside excalidraw:
Here is the Excalidraw exported PNG:
Here is the Excalidraw exported SVG:
Here is the file exported by excalidraw_export:
(volume_representations.excalidraw.svg):
Here is the generated SVG file opened in chrome (brave) and a screenshot
taken:
Take note:
- Most of the floating text that is meant to be over the edges is misplaced.
- The floating text has no background. In Excalidraw, there is a white
  background that blocks out the edge.

Error with svg.replaceAll is not a function

Report

Reading afcc7f1e-b508-4805-b61a-f78d2e7ec6bb.excalidraw
Converting to SVG
Embedding fonts
(node:66669) UnhandledPromiseRejectionWarning: TypeError: svg.replaceAll is not a function
    at embedFonts (/home/yuzhou/.nvm/versions/node/v14.17.5/lib/node_modules/excalidraw_export/dist/main.js:62:15)
    at main (/home/yuzhou/.nvm/versions/node/v14.17.5/lib/node_modules/excalidraw_export/dist/main.js:125:22)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:66669) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:66669) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Is it @Excalidraw/Utils question?

Error with Path2D not defined

Hey!
Thank you for sharing this package.

It seems that for excalidraw scenes where the draw tool is used the program fails with the following error

λ excalidraw_export  ./Untitled-2022-08-17-1616.excalidraw 
Reading ./Untitled-2022-08-17-1616.excalidraw
Converting to SVG
ReferenceError: Path2D is not defined
    at up (about:blank:3:744260)
    at cp (about:blank:3:741862)
    at about:blank:3:751529
    at Array.forEach (<anonymous>)
    at about:blank:3:751496
    at Lp (about:blank:3:751585)
    at Module.Dp (about:blank:3:753284)
    at renderSvg (about:blank:5:41)
    at excalidrawToSvg (/usr/local/lib/node_modules/excalidraw_export/dist/main.js:55:23)
    at main (/usr/local/lib/node_modules/excalidraw_export/dist/main.js:122:28)
ReferenceError: Path2D is not defined
    at up (about:blank:3:744260)
    at cp (about:blank:3:741862)
    at about:blank:3:751529
    at Array.forEach (<anonymous>)
    at about:blank:3:751496
    at Lp (about:blank:3:751585)
    at Module.Dp (about:blank:3:753284)
    at renderSvg (about:blank:5:41)
    at excalidrawToSvg (/usr/local/lib/node_modules/excalidraw_export/dist/main.js:55:23)
    at main (/usr/local/lib/node_modules/excalidraw_export/dist/main.js:122:28)
ReferenceError: Path2D is not defined
    at up (about:blank:3:744260)
    at cp (about:blank:3:741862)
    at about:blank:3:751529
    at Array.forEach (<anonymous>)
    at about:blank:3:751496
    at Lp (about:blank:3:751585)
    at Module.Dp (about:blank:3:753284)
    at renderSvg (about:blank:5:41)
    at excalidrawToSvg (/usr/local/lib/node_modules/excalidraw_export/dist/main.js:55:23)
    at main (/usr/local/lib/node_modules/excalidraw_export/dist/main.js:122:28)
Writing ./Untitled-2022-08-17-1616.excalidraw.svg

This might be related: Automattic/node-canvas#1116

text font-family attribute not working

On my setup with Ubuntu 24.04, svg

<text x="0" y="NaN" 
font-family="Virgil GS, Segoe UI Emoji" 
font-size="20px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">
My life
</text>

with a font-family attribute have no font whatsoever, (sometime when it does it is always my system default font Hurmit)

The text in the picture includes all 3 fonts from excalidraw, but none is displayed.

Instead,

<text x="0" y="NaN" font-family="Virgil GS, Segoe UI Emoji"  font-size="20px" fill="#1e1e1e" text-anchor="start" 
style="white-space: pre;font-family: 'Virgil GS';" 
direction="ltr" dominant-baseline="alphabetic">
My life
</text>

Finds the font correctly

It is the method of adding font used in Inkscape. And From my experiments, font-family attribute of text tag don't have effect(other than sometimes turns the font into system font) in firefox, gwenview, and emacs's svg display.

I wonder if we can add font-family to style attribute for robustness.

mermaid-to-excalidraw

Any chance of including support for
https://docs.excalidraw.com/docs/@excalidraw/mermaid-to-excalidraw/installation
in this tool? :)