https://github.com/xiguaxigua/docusaurus-plugin-drawio

drawio render for docusaurus
https://github.com/xiguaxigua/docusaurus-plugin-drawio

docusaurus drawio

Last synced: 2 months ago
JSON representation

drawio render for docusaurus

• Host: GitHub
• URL: https://github.com/xiguaxigua/docusaurus-plugin-drawio
• Owner: xiguaxigua
• License: mit
• Created: 2022-02-27T02:30:05.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-03-09T03:47:58.000Z (almost 2 years ago)
• Last Synced: 2024-11-02T22:52:06.462Z (3 months ago)
• Topics: docusaurus, drawio
• Language: TypeScript
• Homepage: https://xiguaxigua.com/docusaurus-plugin-drawio
• Size: 1.32 MB
• Stars: 36
• Watchers: 2
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-ccamel - xiguaxigua/docusaurus-plugin-drawio - drawio render for docusaurus (TypeScript)

README

        
# docusaurus-plugin-drawio

> support to use draw.io in your website

![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/xiguaxigua/docusaurus-plugin-drawio/build/master)

![npm](https://img.shields.io/npm/v/docusaurus-plugin-drawio)

![npm](https://img.shields.io/npm/dw/docusaurus-plugin-drawio)

![GitHub top language](https://img.shields.io/github/languages/top/xiguaxigua/docusaurus-plugin-drawio)

![GitHub](https://img.shields.io/github/license/xiguaxigua/docusaurus-plugin-drawio)

## Install

```

npm i docusaurus-plugin-drawio

```

## Add plugin

```js

  plugins: [

    ['drawio', {}],

  ],

```

## Quick Start

in foo.mdx file

```jsx

import Drawio from '@theme/Drawio'

import simpleGraph from '!!raw-loader!./drawio-graph/simple.drawio';

```

## Select display page

if your drawio file has many pages and you want to select which display by default,

you can set `page` props

```jsx

import Drawio from '@theme/Drawio'

import simpleGraph from '!!raw-loader!./drawio-graph/simple.drawio';

```

## Customize viewer.js file cdn address

> default viewer.js cdn is `https://cdn.jsdelivr.net/npm/docusaurus-plugin-drawio/viewer.min.js`

```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 |

| title | Sets an optional title for the toolbar (or a tooltip if no toolbar is visible). | string |

| 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 | Specifies a space-separated list of visible layers, for example "1 2 3"  | string |

| 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](./LICENSE)