0.4.0 • Published 3 years ago
docusaurus-plugin-drawio v0.4.0
docusaurus-plugin-drawio
support to use draw.io in your website
Install
npm i docusaurus-plugin-drawioAdd 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