Skip to main content

2 posts tagged with "mermaid"

View All Tags

Markdown & Mermaid Diagrams Visual for Power BI – Update 1.4.0

· One min read
Ilfat Galiev
Software Engineer

The latest 1.4.0 update of the Markdown & Mermaid Diagrams visual introduces exciting new features and enhancements:

✨ New Features

📌 Custom Styling with the styles Block

You can now define custom styles for text elements using the new styles block.

All content within this block is added as a <style> tag in the final HTML render.

Example:

h1 {
color: red;
}

This will make all <h1> headings appear in red.

🛠 New Handlebars.js Helper Functions

We've added several new helper functions for the Handlebars.js templating engine, including:

  • Equal (eq)
  • Not Equal (ne)
  • Less Than (lt)
  • Less Than or Equal (lte)
  • Greater Than (gt)
  • Greater Than or Equal (gte)
  • Logical AND (and)
  • Logical OR (or)

📖 Read the full Handlebars.js helpers documentation →

🔍 Improved Debugging: View Source on Render Failure

If rendering fails, the visual now displays the source configuration of the chart. This helps you quickly identify and fix any issues.

⚡ Increased Diagram Rendering Limit

The maxEdges configuration parameter has been set to 30,000, allowing the visual to render diagrams with up to 30,000 nodes.

Markdown and Mermaid Visual

· One min read
Ilfat Galiev
Software Engineer

Markdown and Mermaid Visual

Visual editor preview

There is POC of the visual for rendering Markdown layout and Mermaid diagrams in Power BI reports.

The visual has built in editor powered by react-md-editor with preview feature.

Diagrams rendering powered by Mermaid

Future work:

  • Implement click handlers on nodes
  • Power BI Data binding to nodes

The preview version of the visual available in Visuals menu (above)

Demo:

Preview