Skip to main content

Mermaid Extension

Introduction​

The new Mermaid extension renders text-based Mermaid diagram definitions as SVG visualizations within Wisej.NET applications. Assign the diagram source to the Diagram property and the browser draws it; the widget adds pan and zoom, server-side click events, syntax validation, and export to SVG, PNG and PDF.

The extension is documented in the Extensions manual under Mermaid, with the reference at Wisej.Web.Ext.Mermaid.

Technical Highlights​

  • Text-to-Diagram Rendering
    Supports generation of multiple diagram types (e.g., flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, pie charts) from declarative text syntax.
  • SVG-Based Output
    Diagrams are rendered as scalable, resolution-independent SVG elements, ensuring consistent display across devices and screen sizes.
  • Seamless UI Integration
    Can be embedded within Wisej.NET components such as pages, panels, and dashboards, with full compatibility with server-side logic and data binding.
  • Dynamic and Interactive Rendering
    Enables runtime updates and integration with application state, supporting responsive and data-driven visualizations.
  • Version-Control Friendly
    Diagram definitions are stored as plain text, facilitating collaboration, maintainability, and integration into standard development workflows.

Use cases​

  • Technical documentation and embedded help systems
  • Workflow and process visualization
  • Architecture and system design diagrams
  • Lightweight data visualization scenarios

This extension simplifies the creation and maintenance of complex diagrams while integrating natively into the Wisej.NET application model.

Live Demo​

See the Mermaid extension in action: https://demo.wisej.net/#Preview/Mermaid/Features