# 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.

<figure><img src="/files/yrcXwP38cC1CB3trN85h" alt=""><figcaption></figcaption></figure>

## 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/whats-new-in-4.1/mermaid-extension.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.