Step 1: Basic Shape

Overview

This example use only base Shape component syntax to define the diagram. It's just for illustration purpose, we don't expect you to code your diagram like this as it's not good user expereince to maintain.

Source

app.tsx

app.tsx

import { Shape } from "@dinghy/base-components";

export default function App() {
    return (
        <Shape>
            Web App
            <Shape _dependsOn="Load Balancer">Client</Shape>
            <Shape>
                Cloud
                <Shape _direction="vertical">
                    Public Subnet
                    <Shape _dependsOn="Application">Load Balancer</Shape>
                    <Shape _dependsBy="Load Balancer">Firewall</Shape>
                </Shape>
                <Shape _direction="vertical">
                    Private Subnet
                    <Shape _dependsOn="Postgres">Application</Shape>
                    <Shape>Postgres</Shape>
                </Shape>
            </Shape>
        </Shape>
    );
}

Rendered

Diagram

output/app.png