Vyuh Document

Diagrams and math ​

You will add Mermaid diagrams, KaTeX equations and editable Vyuh diagrams. These are opt-in: the starter set does not include them.

Packages ​

yaml
dependencies:
  vyuh_document_extension_mermaid_editor:
    hosted: https://pub.vyuh.tech
    version: ^0.19.3
  vyuh_document_extension_katex_editor:
    hosted: https://pub.vyuh.tech
    version: ^0.19.3
  vyuh_document_extension_diagram_editor:
    hosted: https://pub.vyuh.tech
    version: ^0.19.3
sh
flutter pub add vyuh_document_extension_mermaid_editor --hosted-url https://pub.vyuh.tech
flutter pub add vyuh_document_extension_katex_editor --hosted-url https://pub.vyuh.tech
flutter pub add vyuh_document_extension_diagram_editor --hosted-url https://pub.vyuh.tech

Each _editor package re-exports its pure-Dart element package, so one dependency gives you the extension and its methods.

Diagram and math packages Each editor package re-exports its pure-Dart element package. vyuh_document_extension_mermaid_editor installs MermaidDocumentExtension over the Mermaid element with insertMermaid. The KaTeX editor package installs KatexDocumentExtension over Equation with insertEquation. The diagram editor package installs DiagramDocumentExtension over Diagram with insertDiagram. YOU DEPEND ON · FLUTTER IT RE-EXPORTS · PURE DART vyuh_document_extension_mermaid_editor MermaidDocumentExtension() vyuh_document_extension_mermaid MermaidDiagram insertMermaid(source:) vyuh_document_extension_katex_editor KatexDocumentExtension() vyuh_document_extension_katex Equation insertEquation(source:) vyuh_document_extension_diagram_editor DiagramDocumentExtension() vyuh_document_extension_diagram Diagram insertDiagram() One dependency gives you the extension, its methods and its typed element.
Each editor package brings its element package

The code ​

dart
import 'package:vyuh_document_editor/vyuh_document_editor.dart';
import 'package:vyuh_document_extension_diagram_editor/vyuh_document_extension_diagram_editor.dart';
import 'package:vyuh_document_extension_katex_editor/vyuh_document_extension_katex_editor.dart';
import 'package:vyuh_document_extension_mermaid_editor/vyuh_document_extension_mermaid_editor.dart';

/// The starter set plus Mermaid, KaTeX equations and Vyuh diagrams.
final controller = DocumentEditorController(
  extensions: const [
    ...DocumentExtension.defaults,
    MermaidDocumentExtension(),
    KatexDocumentExtension(),
    DiagramDocumentExtension(),
  ],
);

void insertGraphics() {
  controller
    ..insertMermaid(source: 'flowchart LR\n  Draft --> Review --> Publish')
    ..insertEquation(source: r'E = mc^2')
    ..insertDiagram();
}

You see a flowchart, an equation and a starter diagram. Select a Mermaid block or an equation to edit it in Properties; a diagram's edit button opens the full-screen diagram editor.

ElementExtensionInsertEdit
MermaidMermaidDocumentExtension()insertMermaid(source:)replaceMermaid, setMermaidGeometry
EquationKatexDocumentExtension()insertEquation(source:)replaceEquation, setEquationGeometry
Vyuh DiagramDiagramDocumentExtension()insertDiagram()replaceDiagram, setDiagramGeometry

Markdown syntax for both

To read Mermaid fences and $$ math from Markdown, add their syntax to the registry:

dart
MarkdownExtensionRegistry.fromExtensions(
  DocumentExtension.defaults,
  fencedBlocks: [createMermaidMarkdownExtension()],   // vyuh_document_extension_mermaid/markdown.dart
  math: createKatexMarkdownExtension(),               // vyuh_document_extension_katex_editor
);

The typed API declares them too (MermaidDiagram, Equation, Diagram), so headless code and agents can create and edit them.

Next ​

Step 8: workspace and inspector.