A minimal cross-platform-ready Mermaid diagram editor built with .NET 9 + Avalonia. The editor uses MermaidJS to render Mermaid Diagrams. It is cross-platform and runs on:
- Windows x86/x64/arm64
- Linux x64/arm64
- macOS x64/arm64
It has an optional "Live Preview" feature to render in real-time. I plan to add syntax highlighting and SVG/PNG exporting. If there are features you'd like to see, open a feature request.
I hope you enjoy it and feel welcome to contribute!
- Paste/edit Mermaid markup on the left, click Render to preview on the right.
- Click Clear to clear the Editor pane.
- Bundled
mermaid.min.jsfor offline use. - On startup attempts to fetch the latest Mermaid version (if online) and self-updates the local bundle.
- Persists last diagram in user settings (AppData\MermaidPad\settings.json).
- Drag the divider to resize the editor pane.
- Syntax highlighting (AvaloniaEdit custom definition)
- SVG/PNG export
Here are some examples - you can find these here.
graph TD
A[Start Build] --> B{runtimeFlavor specified?}
B -->|No| C[Default to CoreCLR + subset logic]
B -->|Yes| D{Which flavor?}
D -->|coreclr| E[CoreCLR only mode]
D -->|mono| F[Mono only mode]
C --> G[Build CoreCLR components + whatever's in subset]
E --> H{subset contains mono?}
F --> I{needs CoreCLR deps?}
H -->|Yes| J[CONFLICT - can't build mono in CoreCLR-only mode]
H -->|No| K[Build CoreCLR only]
I -->|Yes| L[FAIL - missing corehost dependencies]
I -->|No| M[Build Mono only]
G --> N[SUCCESS - builds both as needed]
sequenceDiagram
participant User
participant System
User->>System: Request data
System-->>User: Send data
User->>System: Process data
System-->>User: Confirmation
User->>System: Logout
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
Animal <|-- Dog
class Cat {
+String color
+meow()
}
Animal <|-- Cat
class Bird {
+String species
+fly()
}
Animal <|-- Bird
class Fish {
+String type
+swim()
}
Animal <|-- Fish
class Reptile {
+String habitat
+crawl()
}
Animal <|-- Reptile
class Insect {
+String wingspan
+buzz()
}
Animal <|-- Insect
stateDiagram
[*] --> Idle
Idle --> Processing : start
Processing --> Completed : finish
Processing --> Error : fail
Completed --> Idle : reset
Error --> Idle : reset
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Task 1 :a1, 2023-10-01, 30d
Task 2 :after a1, 20d
section Development
Task 3 :2023-11-01, 40d
Task 4 :after a3, 30d
section Testing
Task 5 :2024-01-01, 20d
Task 6 :after a5, 15d
pie
title Browser Usage
"Chrome": 45
"Firefox": 30
"Safari": 15
"Others": 10
