@richhtmleditor/diagrams

Mermaid diagram plugin for Rich HTML Editor. Adds an Insert Diagram toolbar tool that opens a code editor with live Mermaid preview — flowcharts, sequence diagrams, class diagrams, and more. Built on @richhtmleditor/core.

Current release: 1.2.9 — Depends on @richhtmleditor/core ^1.2.9.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.stackkitlabs.com — demo · guide · API

What's in 1.2.9

• createDiagramsPlugin — registers the insertDiagram toolbar tool
• Mermaid live preview — code editor with real-time SVG rendering
• Diagram types — flowchart, sequence, class, state, entity-relationship, gantt, pie, and more
• DOCX/PDF export — diagrams rasterize to PNG for DOCX; PDF uses full preview CSS
• Dark mode — diagram panel respects editor dark mode tokens

Enterprise feature — requires enterprise licence.

Keywords: richhtmleditor diagrams mermaid flowchart wysiwyg

Install

npm install @richhtmleditor/diagrams
# Requires @richhtmleditor/core (via framework wrapper or direct install).

Usage

import { createEditor } from "@richhtmleditor/core";
import { createDiagramsPlugin } from "@richhtmleditor/diagrams";

const editor = createEditor({
  element: host,
  toolbar: { preset: "full" },
  plugins: [createDiagramsPlugin()]
});

Angular

import { createDiagramsPlugin } from "@richhtmleditor/diagrams";

plugins = [createDiagramsPlugin()];

<richhtmleditor [plugins]="plugins" [toolbar]="{ preset: 'full' }" />

React

import { RichHtmlEditor } from "@richhtmleditor/react";
import { createDiagramsPlugin } from "@richhtmleditor/diagrams";

const plugins = [createDiagramsPlugin()];

<RichHtmlEditor toolbar={{ preset: "full" }} plugins={plugins} />

API

createDiagramsPlugin(options?)

Returns an EditorPlugin that registers the insertDiagram toolbar tool.

| Option | Type | Description | | --- | --- | --- | | mermaidVersion | string? | CDN version of Mermaid to load (default: latest). |

Related packages

• @richhtmleditor/core — editor engine and plugins API.
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/math — LaTeX/MathML equation plugin.
• @richhtmleditor/export — DOCX/PDF export plugin.
• @richhtmleditor/angular — Angular wrapper.
• @richhtmleditor/react — React wrapper.

License

MIT