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="//"></script>
<script src=""></script>
<script src=""></script>

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


export async function renderDot(model, element) {
    var graphviz =

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…


@inject IJSRuntime JsRuntime

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


@code {
    private ElementReference _renderTo; 

    protected override async Task OnInitializedAsync()
        var diagramModule = await JsRuntime
            .InvokeAsync<IJSObjectReference>("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!

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.

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"
    subgraph cluster_3 {
        label = "Business Logic"
        bgcolor = "#b2e3b0"
       subgraph cluster_4 {
            bgcolor = "white"
            label = "User Service"
    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.

Build better ASP.NET web applications, faster

I email every week with hints, tips and advice on how to push through all the noise to get your ASP.NET applications built.

Drop your email in the box below and I'll send new articles straight to your inbox.

I respect your email privacy. No spam, unsubscribe anytime with one click.


Next up

Sure, you could write all those Blazor HTTP calls yourself…
Writing boilerplate API client code is deadly dull and repetitive, Refit will do it for you
With so many Blazor Component Libraries, which one is best for you?
There’s no shortage of component libraries available for Blazor, but how do you figure out which one you should use?
Will .NET 6 fix Blazor Prerendering?
Prerendering eradicates Blazor WASM’s initial load time and .NET 6 promises to address its one key limitation