Dinghy Architecture - Runtime

A real world example of sequence diagram.

Source

runtime.tsx

import { Shape } from "@dinghy/base-components";
import * as uml from "@dinghy/diagrams/entitiesUml";

export default function App() {
  return (
    <DinghyArchitecture>
      <CoreModules>
        <StandardComponents>
          <Module>diagrams</Module>
          <Module>tf-aws</Module>
        </StandardComponents>
        <Base _distributed>
          <Module _dependsBy={["StandardComponents", "base-renderer"]}>
            base-components
          </Module>
          <Module>base-renderer</Module>
        </Base>
        <Renderers _dependsOn="base-renderer">
          <Module>renderer-json</Module>
          <Module>renderer-drawio</Module>
          <Module>renderer-tf</Module>
        </Renderers>
      </CoreModules>
      <Projects _distributed>
        <Project _dependsBy="cli" _dependsOn="StandardComponents">
          project / examples
        </Project>
        <Project>cli</Project>
        <Project _dependsBy="cli" _dependsOn="Renderers">engine</Project>
      </Projects>
    </DinghyArchitecture>
  );
}

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

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

const Base = (props: any) => <Shape _distribution="even" {...props} />;

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

const Module = (props: any) => (
  <uml.Module
    _width={130}
    {...props}
    _style={{
      verticalAlign: "middle",
    }}
  />
);
const Project = (props: any) => <Shape _width={120} _height={60} {...props} />;

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

Diagram