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