@jackinatox/docusaurus-plugin-drawio

support to use draw.io in your website

Note: This is not the original package. The original docusaurus-plugin-drawio by @xiguaxigua had a bug that broke compatibility with newer versions of Docusaurus. This package is based on the fix from @epruesse's pull request #28, which was never merged into the original repo. This fork exists solely to make that fix available as a published npm package.

Install

npm i @jackinatox/docusaurus-plugin-drawio

Add plugin

  plugins: [
    ['@jackinatox/docusaurus-plugin-drawio', {}],
  ],

Quick Start

in foo.mdx file

import Drawio from '@theme/Drawio'
import simpleGraph from '!!raw-loader!./drawio-graph/simple.drawio';

<Drawio content={simpleGraph} />

Select display page

if your drawio file has many pages and you want to select which display by default, you can set page props

import Drawio from '@theme/Drawio'
import simpleGraph from '!!raw-loader!./drawio-graph/simple.drawio';

<Drawio content={simpleGraph} page={1} />

Customize viewer.js file cdn address

default viewer.js cdn is https://cdn.jsdelivr.net/npm/docusaurus-plugin-drawio/viewer.min.js

  plugins: [
    ['drawio', { lib: 'http://domain/path/viewer.js' }],
  ],

Props

drawio supports many configurations, many of which I don't know what the meaning is, and I don't know the type of the corresponding value. If you know, welcome to submit a pull request

| prop | meaning | type | | ---- | ---- | ---- | | page | page to be displayed | number | | toolbar | The toolbar can be configured through this property, for example: "zoom layers tags lightbox" | string | | pageId | page to be displayed | string | | zoom | set zoom ratio | number | | maxHeight | the max height of graph | number | | title | Sets an optional title for the toolbar (or a tooltip if no toolbar is visible). | string | | forceCenter | I don't know the meaning of this configuration | boolean | | center | I don't know the meaning of this configuration | boolean | | responsive | I don't know the meaning of this configuration | boolean | | border | I don't know the meaning of this configuration | any | | move | I don't know the meaning of this configuration | any | | nav | I don't know the meaning of this configuration | boolean | | tooltips | I don't know the meaning of this configuration | any | | resize | I don't know the meaning of this configuration | boolean | | layers | Specifies a space-separated list of visible layers, for example "1 2 3" | string | | layerIds | I don't know the meaning of this configuration | any | | target | I don't know the meaning of this configuration | any | | highlight | I don't know the meaning of this configuration | string | | lightbox | I don't know the meaning of this configuration | any | | editable | I don't know the meaning of this configuration | any | | edit | I don't know the meaning of this configuration | any | | editFunc | I don't know the meaning of this configuration | any | | autoFit | I don't know the meaning of this configuration | any | | autoCrop | I don't know the meaning of this configuration | any | | autoOrigin | I don't know the meaning of this configuration | any | | allowZoomOut | I don't know the meaning of this configuration | any | | allowZoomIn | I don't know the meaning of this configuration | any | | checkVisibleState | I don't know the meaning of this configuration | any | | toolbarPosition | I don't know the meaning of this configuration | any | | toolbarNohide | I don't know the meaning of this configuration | any | | toolbarButtons | I don't know the meaning of this configuration | any |

Docs

https://xiguaxigua.com/docusaurus-plugin-drawio

How to edit draw.io file

There are many way to edit such as https://app.diagrams.net/ or vscode plugin

License

MIT