excalidraw / gatsby-embedder-excalidraw

🤴 Custom transformer to embed Excalidraw diagrams

gatsby-embedder-excalidraw

This custom transformer for gatsby-remark-embedder allows you to embed Excalidraw diagrams in Markdown content simply by pasting an Excalidraw link in the source.

The code for this library is lifted from this directory in the excalidraw-blog Gatsby site. All credit for this transformer goes to those authors. I was inspired to do this when I saw Alex Luong's tweet about making this functionality into a gatsby-remark-excalidraw plugin.

• Installation
• Usage
• Example
  • Install dependencies
  • Configure plugins
  • Create a drawing
  • Embed your drawing
• License

Installation

npm install gatsby-embedder-excalidraw

Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-embedder',
            options: {
              customTransformers: [require('gatsby-embedder-excalidraw')]
            }
          }
        ]
      }
    }
  ]
};

Example

This guide will show you how to get up and running with gatsby-embedder-excalidraw in the fewest steps possible. It uses gatsby-plugin-mdx to take advantage of its awesome default behaviour of automatically creating pages based on MDX files in src/pages.

Install dependencies

First, install gatsby and its dependencies:

npm install gatsby react react-dom

Next, install gatsby-plugin-mdx and its dependencies:

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

Configure plugins

Add gatsby-plugin-mdx to your Gatsby config:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx'
    }
  ]
};

Install the gatsby-remark-embedder plugin and this Excalidraw transformer gatsby-embedder-excalidraw:

npm install gatsby-remark-embedder gatsby-embedder-excalidraw

Add gatsby-remark-embedder as a Gatsby remark plugin for gatsby-plugin-mdx. In your gatsby-remark-embedder options, add gatsby-embedder-excalidraw as a custom transformer:

// gatsby-config.js
module.exports = {
  plugins: [
    {
-     resolve: 'gatsby-plugin-mdx'
+     resolve: 'gatsby-plugin-mdx',
+     options: {
+       gatsbyRemarkPlugins: [
+         {
+           resolve: 'gatsby-remark-embedder',
+           options: {
+             customTransformers: [require('gatsby-embedder-excalidraw')]
+           }
+         }
+       ]
+     }
    }
  ]
};

Create a drawing

Head over to Excalidraw and draw something! Once you're satisfied, you can find a shareable link to your drawing in the export dialog, accesible from the icon in the top left corner of the page.

Embed your drawing

Create an MDX page at src/pages/index.mdx and add a link to an Excalidraw diagram:

# Fox grab flowchart

Fox's followups after a grab depend on your opponent's DI:

https://excalidraw.com/#json=5695519967936512,sLhjTgn1_wB1iVLLquX6Fg

Voila! 🎉 https://excalidraw-embed.trevorblades.com

License

MIT

gatsby-embedder-excalidraw's Issues

Make this a built-in transformer?

I'd love to have this one by default in the plugin. 👊

@trevorblades @j-f1 @lipis Would you mind creating a PR for this please? 🤔

Add to docs how to get shareable link

I didn't know that I can share my work through a link on excalidraw.

My suggestion is to add one of the following:

"To get a shareable link for your work on excalidraw, export your work and press the link icon 🔗"

Or

add this GIF

Bug Stuck on Building development bundle

Hi,

Going through the readme explanation, when adding gatsby-embedder-excalidraw to gatsbyRemarkPlugins of gatsby-plugin-mdx and running gatsby develop, the building bundle stuck and never finishes.

Reproducible example in codesandbox:

Also, cloning the repo (installing the dependencies etc.) and running the example will result in the same issue.

🐛 No node found for selector [aria-label='Scale 3 x']

I'm not sure if I should file here or as an issue with gatsby-plugin-mdx but after a month of not touching my site, I can't get the development bundle to build correctly and it looks like it's unhappy with the Excalidraw links.

yarn run v1.22.4
$ gatsby develop
success open and validate gatsby-configs - 0.092s
success load plugins - 4.334s
success onPreInit - 0.018s
success initialize cache - 0.022s
success copy gatsby files - 0.075s
success onPreBootstrap - 0.013s
success createSchemaCustomization - 0.005s

 ERROR #11321  PLUGIN

"gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle:

The following error appeared while processing 'https://excalidraw.com/#json=5086916491870208,sLUFfW5oMgrO3ApQwe4YQw':

No node found for selector: [aria-label='Scale 3 x']

  31 |   const createAndProcessNode = path => {
  32 |     const fileNodePromise = createFileNode(path, createNodeId, pluginOptions).then(fileNode => {
> 33 |       createNode(fileNode);
     |       ^
  34 |       return null;
  35 |     });
  36 |     return fileNodePromise;

File: node_modules/gatsby-source-filesystem/gatsby-node.js:33:7

To Reproduce

This is on my personal site on the bug-reproduce.

1. git clone --single-branch --branch bug-reproduce https://github.com/jsjoeio/joeprevite.com.git
2. yarn install
3. yarn dev

Observe output

Expected

Success - everywhere!

Actual

A bunch of errors and an unhappy development bundle

gatsby-remark-embedder is on version 4

• https://github.com/MichaelDeBoey/gatsby-remark-embedder/tags
• https://github.com/excalidraw/gatsby-embedder-excalidraw/blob/master/package.json#L27