Skip to main content

Mermaid Extension

Introduction​

A new extension for diagram generation using Mermaid, enabling text-based definitions to be rendered as dynamic SVG visualizations directly within Wisej.NET applications.

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 Mermaid extension in action here: https://demo.wisej.net/#Preview/Mermaid/Features