https://github.com/zzxming/quill-mermaid-chart

https://github.com/zzxming/quill-mermaid-chart

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/zzxming/quill-mermaid-chart
• Owner: zzxming
• License: mit
• Created: 2024-11-15T10:32:47.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-16T14:05:09.000Z (about 2 months ago)
• Last Synced: 2024-11-16T14:33:12.033Z (about 2 months ago)
• Language: TypeScript
• Size: 82 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# QuillMermaid

A Quill.js module to add Mermaid support. Help you to write flowcharts, sequence diagrams, gantt charts and more.

If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](https://mermaid.js.org/intro/syntax-reference.html).

[Demo](https://zzxming.github.io/quill-mermaid-chart/)

## Usage

Makesure mermaid is loaded on window

```js

import QuillMermaid from 'quill-mermaid';

Quill.register({

  'modules/mermaid': QuillMermaid,

}, true);

const quill = new Quill('#editor', {

  theme: 'snow',

  modules: {

    toolbar: [

      ['bold', 'italic', 'underline', 'strike'],

      ['blockquote', 'code-block', 'code'],

      ['link', 'image', 'video', 'formula'],

      [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],

      [{ script: 'sub' }, { script: 'super' }],

      [{ indent: '-1' }, { indent: '+1' }],

      [{ direction: 'rtl' }],

      [{ size: ['small', false, 'large', 'huge'] }],

      [{ header: [1, 2, 3, 4, 5, 6, false] }],

      [{ color: [] }, { background: [] }],

      [{ font: [] }],

      [{ align: [] }],

      ['clean'],

      // add mermaid chart button

      ['mermaid-chart'],

    ],

    mermaid: true

  },

});

```