Interactive topology explorer

What ChartForgeX renders, and where you can try it.
- Gallery Sixty charts and diagrams with their C# source.
- Mermaid Thirty Mermaid families, rendered without a browser.
- Playground Edit Mermaid or markup and render it in your browser.
- PowerShell ImagePlayground scripts beside the files they produced.
- PowerBGInfo Windows wallpapers with charts and topology, from PowerShell.
Build with the .NET packages.
- Docs Install, choose a surface, topology, interactivity and stories.
- API Every public .NET type, member and namespace.
- Examples Four complete programs and the output they render.
Current section: Examples

interactive-topology.html Open full page Static SVG

The explorer this program writes, running in the page. Search, select a region to drill in, and switch its theme.

A GraphScene becomes one self-contained HTML file with search, drill-down and a theme toggle. The explorer above is this program's output, running in the page.

Model the estate

Nodes carry labels, badges, secondary text and a status. ParentId builds the hierarchy the explorer drills into.

using System.IO;
using ChartForgeX.Interactivity;
using ChartForgeX.Interactivity.Html;

var graph = GraphScene.Create("estate", "Global estate")
    .AddNode("global", "Global", node => node.BadgeText = "42")
    .AddNode("europe", "Europe", node => {
        node.ParentId = "global";
        node.SecondaryLabel = "4 sites · 18 workloads";
        node.Status = "warning";
    })
    .AddNode("americas", "Americas", node => {
        node.ParentId = "global";
        node.SecondaryLabel = "3 sites · 14 workloads";
        node.Status = "healthy";
    })
    .AddNode("apac", "Asia Pacific", node => {
        node.ParentId = "global";
        node.SecondaryLabel = "2 sites · 10 workloads";
        node.Status = "healthy";
    })
    .AddEdge("global-europe", "global", "europe",
        configure: edge => edge.Directed = true)
    .AddEdge("global-americas", "global", "americas",
        configure: edge => edge.Directed = true)
    .AddEdge("global-apac", "global", "apac",
        configure: edge => edge.Directed = true)
    .AddEdge("europe-apac", "europe", "apac", "replication",
        edge => edge.Status = "warning");

Add the sites

Sites hang under their region. Stable ids keep selection and links valid when the data changes.

foreach (var (id, label, region) in new[] {
    ("warsaw", "Warsaw", "europe"), ("london", "London", "europe"),
    ("frankfurt", "Frankfurt", "europe"), ("new-york", "New York", "americas"),
    ("toronto", "Toronto", "americas"), ("sydney", "Sydney", "apac"),
    ("singapore", "Singapore", "apac")
}) {
    graph.AddNode(id, label, node => node.ParentId = region)
        .AddEdge(region + "-" + id, region, id,
            configure: edge => edge.Directed = true);
}

Lay it out as a hierarchy

The hierarchical layout sets regions under the global node and sites under their region. The explorer opens on the global node with one level of children; readers drill into a region from there.

graph.Options.UseSuperTopologyDefaults();
graph.Options.Layout.Mode = GraphLayoutMode.Hierarchical;
graph.Options.Hierarchy.InitialRootNodeId = "global";
graph.Options.Hierarchy.InitialDepth = 1;

Write one HTML file

The page carries its own script and styles. Switch the backend to Canvas or WebGL for larger scenes while keeping the same model and navigation.

var html = graph.ToGraphExplorerHtmlPage(options => {
    options.RenderBackend = HtmlGraphRenderBackend.Svg;
    options.Theme = HtmlGraphExplorerTheme.System;
    options.IncludeThemeToggle = true;
});

File.WriteAllText("estate.html", html);

graph.ToGraphSvg() writes a script-free SVG of the same scene for documents that cannot run script; set Theme in its options for a dark export. The card image on the examples page is that export, in both themes.

Edit this page on GitHub