How to Embed Image in Structurizr Diagram

[dargoz]

Hi everyone,

I wonder if it possible to attach image along side the component / element in diagram like screenshot below:

when searching through documentation I only found a way using external markdown file. but what I want is it displayed along side the diagram like displaying icon:

but the icon is replaced with an image (JPEG / PNG) that have size like a web page.

[timothystone]

Create a tag, then set a style for the element tagged.

model {
  fooC = container “key” {
     …
     tags “foo”
  }
}
…
views {
  styles {
    …
    element “foo” {
      …
      icon path/to/image.png
    }
  }
}
…

[dargoz]

the idea is to give more context from frontend as entry point.

[timothystone]

What about using a shape for the element? See shapes.

model {
  fooC = container “key” {
     …
     url https://foobar.com/image
     tags “foo”
  }
}
…
views {
  styles {
    …
    element “foo” {
      …
      shape MobileDevicePortrait
    }
  }
}
…

[timothystone]

Also, what about a url on the SoftwareSystem, Container, or Component that links to a Figma, Balsamiq, or other wireframe tooling, even static images in a documentation site or ADR? Add the shape for more context in the diagram.

[timothystone]

@dargoz I made a demo of my ideas... ... Yes, it's on GitLab. It's where I do most of my OSS work.

[timothystone]