docusaurus-plugin-drawio

0.4.0 • Public • Published

docusaurus-plugin-drawio

support to use draw.io in your website

GitHub Workflow Status (branch) npm npm GitHub top language GitHub

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

Readme

Keywords

none

Package Sidebar

Install

npm i docusaurus-plugin-drawio

Weekly Downloads

1,824

Version

0.4.0

License

MIT

Unpacked Size

2.09 MB

Total Files

7

Last publish

Collaborators

  • quietcoder