←back to thread

374 points x0z | 2 comments | | HN request time: 0.406s | source
Show context
9dev ◴[] No.44432956[source]
This is a little tangential, but I've wondered for a while if there's a better way to visualise the composition of software systems.

Often, there's not only a single way to look at one: There's a user interaction flow through components, but those components also consist of hardware; the hardware might be virtual and composed of several, spread, sub-components, or even containers. You can go down this path pretty deep, and arrive at several different representations of the system that are either impossible to visualise at the same time, or make it incomprehensible.

Ideally, I would want to have a way to document different facets of the system individually, but linked to each other, and be able to change my perspective at anytime. This would allow to flip between UX, network traffic, firewall boundaries, program flow, logical RPC flow, and so on; all while being able to view connected components for a given component at anytime. For example, inspecting an application, then viewing its network ports, then its runtime container, the hypervisor the container runs on, the cloud provider that sits in, and so on.

My idea so far is a graph database that contains all components and the edges between them. The tool would have to be as extensible as possible, so using something like HCL to describe the graph would be great, with extensions for all kinds of components and edges. And finally a viewer to render visual representations of one or more composable layers to flick through, and export etc.

I never got around to working on it yet, but if anyone else had the same idea, I'd be open to collaborating :)

replies(5): >>44432990 #>>44433058 #>>44433063 #>>44433241 #>>44440325 #
alixanderwang ◴[] No.44432990[source]
At least for the layering + using text aspect, D2 support this:

defining diagrams as multiple layers like so

  x -> y

  layers: {
    inside_x: {
      a -> b
    }
  }
A fleshed out example hosted on our web service: https://app.terrastruct.com/diagrams/664641071
replies(3): >>44433688 #>>44433751 #>>44433913 #
1. 9dev ◴[] No.44433913[source]
Terrastruct looks really nice, and kind of like a 2D version of the 3D thing I'm thinking of; if you could attach key-value properties to nodes and vertices, and had different rendering modes that made use of any of these properties to render the item differently, that would probably be pretty close. For example, a layer that displays a physical network might only consider vertices with a `kind` attribute of "physical link"; that limits the layer to all nodes with a matching vertex between them, and the layer would also only display those attributes of the nodes relevant for the current view.

Does that make sense?

replies(1): >>44433940 #
2. alixanderwang ◴[] No.44433940[source]
Yeah we do this with globs.

  a.class: backend
  b.class: frontend

  # hide everything
  **: suspend

  layers: {
     backend: {
       # show backend stuff
       **: unsuspend {
         &class: backend
       }
     }
  }

see more here: https://d2lang.com/blog/c4/