0.4.0 • Published 1 year ago

docusaurus-plugin-drawio v0.4.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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

propmeaningtype
pagepage to be displayednumber
toolbarThe toolbar can be configured through this property, for example: "zoom layers tags lightbox"string
pageIdpage to be displayedstring
zoomset zoom rationumber
maxHeightthe max height of graphnumber
forceCenterI don't know the meaning of this configurationboolean
centerI don't know the meaning of this configurationboolean
responsiveI don't know the meaning of this configurationboolean
borderI don't know the meaning of this configurationany
moveI don't know the meaning of this configurationany
navI don't know the meaning of this configurationboolean
tooltipsI don't know the meaning of this configurationany
resizeI don't know the meaning of this configurationboolean
layersI don't know the meaning of this configurationany
layerIdsI don't know the meaning of this configurationany
targetI don't know the meaning of this configurationany
highlightI don't know the meaning of this configurationstring
lightboxI don't know the meaning of this configurationany
editableI don't know the meaning of this configurationany
editI don't know the meaning of this configurationany
editFuncI don't know the meaning of this configurationany
autoFitI don't know the meaning of this configurationany
autoCropI don't know the meaning of this configurationany
autoOriginI don't know the meaning of this configurationany
allowZoomOutI don't know the meaning of this configurationany
allowZoomInI don't know the meaning of this configurationany
checkVisibleStateI don't know the meaning of this configurationany
toolbarPositionI don't know the meaning of this configurationany
toolbarNohideI don't know the meaning of this configurationany
toolbarButtonsI don't know the meaning of this configurationany

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

0.3.0

1 year ago

0.2.0

1 year ago

0.4.0

1 year ago

0.1.2

2 years ago

0.1.7

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.5

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago

0.0.1

2 years ago