examples/diagram-themes.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>
    const url = 'https://raw.githubusercontent.com/structurizr/ui/main/examples/amazon-web-services.json';
    $.ajax({url: url,
    success: function(data){
        structurizr.workspace = new structurizr.Workspace(JSON.parse(data));

        structurizr.ui.loadThemes(function() {
            const diagram = new structurizr.ui.Diagram('diagram', false, function() {
                diagram.changeView('AmazonWebServicesDeployment');
            });
        });
    }});
</script>