28

Render diagrams on the fly in your Blazor apps

 3 years ago
source link: https://jonhilton.net/blazor-diagrams/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Render diagrams on the fly in your Blazor apps

October 1, 2020 · 2 minute read · Tags: blazor , javascript

Nothing beats a good diagram!

If you’ve ever tried to describe your software’s architecture using just words you know the power of an effective visual.

But what if you want to define that diagram using a simple text based language, then render it in your Blazor app?

Turns out you can, using something called GraphViz and a teeny tiny bit of javascript interop.

First you’ll need to reference a few JS scripts in your index.html file (if using Blazor WASM).

<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>

Then you’ll need to write a tiny bit of javascript code.

wwwroot\diagrams.js

export async function renderDot(model, element) {
    
    var graphviz = d3.select(element)
        .graphviz();
    
    graphviz.renderDot(model);
}

The latest version of .NET 5 makes it possible to import javascript modules like this one, so over in a Blazor component you can do something like this…

Markup

@inject IJSRuntime JsRuntime

<div @ref="_renderTo"></div>

Code

@code {
    private ElementReference _renderTo; 

    protected override async Task OnInitializedAsync()
    {
        var diagramModule = await JsRuntime
            .InvokeAsync<JSObjectReference>("import", "/diagrams.js");

        var diagram = "digraph { HelloWorld }";

        await diagramModule.InvokeVoidAsync("renderDot", diagram, _renderTo);
    }
}

This imports our diagrams.js javascript. We’re then able to call the renderDot method, passing in the following:

  • The “markup” for a diagram written using DOT language
  • A reference to the div where we want the diagram to be rendered

That’s all there is to it. Run this now and you should see an SVG of your diagram, rendered right there in your Blazor component!

Diagram.png

Now admittedly this graph is not all that impressive, but from here you can create all sorts of things…

Here’s a slightly more involved example.

diagram.svg

And here’s the DOT code for it…

digraph Layerz {

graph [fontsize=8 fontname="Verdana"]
ranksep = "1.4 equally";

node [style=filled shape=record fontsize=8 fontname="Verdana"]

    subgraph cluster_1 {
        label = "UI"
        bgcolor = "#d79fd7"
        
       subgraph cluster_2 {
            bgcolor = "white"
            label = "User Controller"
            
            ListAll
       }
    }
    
    subgraph cluster_3 {
        label = "Business Logic"
        bgcolor = "#b2e3b0"
        
       subgraph cluster_4 {
            bgcolor = "white"
            label = "User Service"
            
            List
       }
    }
    
    ListAll -> List
}

Happy graphing!

For more examples check out the GraphViz web site.

If you want to play around with your own DOT diagrams you can give it a whirl in the online editor here.

Considering Blazor for your next project?

Learn my simple, repeatable process for transforming ideas into features using Blazor's component model.

4 days, 4 emails; enter your email in the box below and I'll send you Lesson #1.

Email address

Next up

Dark mode for your web applications (using Blazor and Tailwind CSS)
Eyestrain is a real problem; help your users by adapting your site to their dark mode preferences
Is it possible to render components “dynamically” using Blazor?
Because life’s not complicated enough already!
Render Blazor WASM components in your existing MVC/Razor Pages applications
You can render individual Blazor WASM components in your existing Razor Pages (or MVC) Core app.

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK