Legend

Use _x and _y to position legend at bottom right cornor. The legend shape dimention was adjusted with _width and _height attributes.

Source

legend.tsx

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

export default function App() {
    return (
        <Shape _title="Legend Example">
            <Shape _title="Container">
                <Shape>Entity</Shape>
            </Shape>
            <Legend>
                <LegendElement Component={Rectangle} _title="Container" />
                <LegendElement Component={Shape} _title="Entity" />
            </Legend>
        </Shape>
    );
}

const LegendElement = ({ Component, ...props }: any) => (
    <Component _width={80} _height={20} _margin={{ bottom: 0 }} {...props} />
);

const Legend = (props: any) => (
    <Shape
        _x={200}
        _y={200}
        _style={{ opacity: 0 }}
        _direction="vertical"
        {...props}
    />
);

Diagram