docusaurus-plugin-drawio

support to use draw.io in your website

Install

npm i docusaurus-plugin-drawio

Add plugin

  plugins: [
    ['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 | | 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 | I don't know the meaning of this configuration | any | | 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