examples/diagram-navigate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../src/js/jquery-3.6.3.min.js"></script>

    <script src="../src/js/lodash-4.17.21.js"></script>
    <script src="../src/js/backbone-1.4.1.js"></script>
    <script type="text/javascript" src="../src/js/joint-3.6.5.js"></script>

    <script type="text/javascript" src="../src/js/structurizr.js"></script>
    <script type="text/javascript" src="../src/js/structurizr-util.js"></script>
    <script type="text/javascript" src="../src/js/structurizr-ui.js"></script>
    <script type="text/javascript" src="../src/js/structurizr-workspace.js"></script>
    <script type="text/javascript" src="../src/js/structurizr-diagram.js"></script>

    <link href="../src/css/joint-3.6.5.css" rel="stylesheet" media="screen" />
    <link href="../src/css/structurizr-diagram.css" rel="stylesheet" media="screen" />

    <style>
    body {
        font-family: Arial;
    }
    </style>
</head>
<body>
    <div id="diagram" style="width: 1000px; height: 600px;"></div>
</body>
</html>

<script>
    var diagram;
    $.ajax({url: 'https://raw.githubusercontent.com/structurizr/ui/main/examples/big-bank-plc.json',
    success: function(data){
        structurizr.workspace = new structurizr.Workspace(JSON.parse(data));

        diagram = new structurizr.ui.Diagram('diagram', false, function() {
            diagram.changeView('SystemContext');
        });

        diagram.setNavigationEnabled(true);
        diagram.onElementDoubleClicked(elementDoubleClicked);
        diagram.onRelationshipDoubleClicked(elementDoubleClicked);
    }});

    function elementDoubleClicked(event, elementId) {
        const element = structurizr.workspace.findElementById(elementId);
        var views = [];
        if (element.type === structurizr.constants.SOFTWARE_SYSTEM_ELEMENT_TYPE) {
            if (diagram.getCurrentView().type === structurizr.constants.SYSTEM_LANDSCAPE_VIEW_TYPE || diagram.getCurrentView().softwareSystemId !== element.id) {
                views = structurizr.workspace.findSystemContextViewsForSoftwareSystem(element.id);
                if (views.length === 0) {
                    views = structurizr.workspace.findContainerViewsForSoftwareSystem(element.id);
                }
            } else if (diagram.getCurrentView().type === structurizr.constants.SYSTEM_CONTEXT_VIEW_TYPE) {
                views = structurizr.workspace.findContainerViewsForSoftwareSystem(element.id);
            }
        } else if (element.type === "Container") {
            views = structurizr.workspace.findComponentViewsForContainer(element.id);
        }

        if (views.length > 0) {
            diagram.changeView(views[0].key);
        }
    }

    function onRelationshipDoubleClicked(event, relationshipId) {
        const relationship = structurizr.workspace.findRelationshipById(relationshipId);
        if (relationship.url) {
            window.open(relationship.url);
        }
    }
</script>