Step 2: Named Component

This example use only named component function syntax to define the diagram. It shows a cleanner diagram defined which is shows structure clearly. It generate the same diagram as previous Step 1: Basic Shape

Source

app.tsx

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

export default function App() {
    return (
        <WebApp>
            <Client />
            <Cloud>
                <PublicSubnet>
                    <LoadBalancer />
                    <Firewall />
                </PublicSubnet>
                <PrivateSubnet>
                    <Application />
                    <Postgres />
                </PrivateSubnet>
            </Cloud>
        </WebApp>
    );
}

const WebApp = (props: any) => <Shape {...props} />;

const Client = (props: any) => <Shape _dependsOn="Load Balancer" {...props} />;

const Cloud = (props: any) => <Shape {...props} />;

const Subnet = (props: any) => <Shape _direction="vertical" {...props} />;

const PublicSubnet = (props: any) => <Subnet {...props} />;

const PrivateSubnet = (props: any) => <Subnet {...props} />;

const LoadBalancer = (props: any) => (
    <Shape _dependsOn={["Firewall", "Application"]} {...props} />
);

const Application = (props: any) => <Shape _dependsOn="Postgres" {...props} />;

const Firewall = (props: any) => <Shape {...props} />;

const Postgres = (props: any) => <Shape {...props} />;

Diagram