@sim0n92/mermaid-editor-angular

Angular wrapper for Mermaid Editor V2.

Installation

npm install @sim0n92/mermaid-editor-angular

Quick Start

1. Import the Component

import { Component } from '@angular/core';
import { MermaidEditorComponent } from '@sim0n92/mermaid-editor-angular';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [MermaidEditorComponent],
  template: `
    <mermaid-editor
      [initialCode]="diagramCode"
      [theme]="'light'"
      [height]="'600px'"
      (codeChange)="onCodeChange($event)"
      (modelChange)="onModelChange($event)"
      (editorReady)="onEditorReady($event)"
    >
    </mermaid-editor>
  `
})
export class ExampleComponent {
  diagramCode = `flowchart TD
    A[Start] --> B[Process]
    B --> C[Decision]
    C -->|Yes| D[Success]
    C -->|No| E[Error]`;

  onCodeChange(code: string) {
    console.log('Code changed:', code);
  }

  onModelChange(model: any) {
    console.log('Model changed:', model);
  }

  onEditorReady(editor: any) {
    console.log('Editor ready:', editor);
  }
}

API

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | initialCode | string | undefined | Initial Mermaid diagram code | | theme | 'light' \| 'dark' | 'light' | Editor theme | | readonly | boolean | false | Read-only mode | | height | string | '600px' | Container height | | width | string | '100%' | Container width |

Outputs

| Event | Type | Description | |-------|------|-------------| | modelChange | EventEmitter<any> | Diagram model changed | | codeChange | EventEmitter<string> | Code changed | | editorReady | EventEmitter<any> | Editor initialized | | editorError | EventEmitter<Error> | Error occurred |

Methods

| Method | Return Type | Description | |--------|-------------|-------------| | getModel() | any \| null | Get current diagram model | | getCode() | string | Get current code | | setCode(code) | Promise<void> | Set code programmatically | | getEditorInstance() | any \| undefined | Get underlying editor instance | | isEditorReady() | boolean | Check if editor is ready |

Peer Dependencies

• @angular/common ^20.0.0
• @angular/core ^20.0.0
• rxjs ^7.8.0

License

MIT