Customize Mockup Containers (e.g. Window) through Shape.

[netkawai]

Hi

I'm using DrawIO 16.5.1. I would like to customize the Window in Mockup Container to show only one button instead of three.

I checked Edit Diagram. The shape indicates Javascript to function, it does not Shape drawing itself.

I know, I can draw custom shapes through the Shape function.
https://www.diagrams.net/doc/faq/shape-complex-create-edit

However, I can find any place to get the Shape information from the existing mockups.
(I can export a mockup to SVG and edit it and import it back, but e.g. I cannot edit Window Title anymore.)

Can you help me, is there a way to edit/customize easily existing mockups?

Thank you.

[tschaffter]

I have a similar question regarding the customization of the groups (containers) provided by the library "AWS 2024" included with Draw.io. My initial goal is to create a container (listed under AWS / Groups) with a different icon. My main goal has since then switched to understanding how these containers are parametrized and work.

Consider this EC2 content group (object):

The style of this object includes the following key-values (KVs):

shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_ec2_instance_contents;

Questions:

1. What are the values that the property grIcon can take? If the values are part of a set, where is this set defined? Otherwise, how can I specify a different icon, e.g. an arbitrary icon from the AWS library or an SVG image that I would have imported?
2. Where is the shape "mxgraph.aws4.group" defined?
3. What are the values that the property shape can take? I've seen that another value is image by looking at the styles of other objects. Should I be able to create my own Shape (Arrange > Insert > Shape...), give it a name (see below) and then use that name as a value for the property shape (e.g. shape=my-shape)?

<shape name="my-shape" h="100" w="100" aspect="variable" strokewidth="inherit">
  ...
</shape>

Thanks!

[tschaffter]

It looks like the group "mxgraph.aws4.group" is defined here:

drawio/src/main/webapp/js/diagramly/sidebar/Sidebar-AWS4.js

Line 289 in 9c959a7

this.createVertexTemplateEntry(n4 + 'group;grIcon=' + gn + '.group_ec2_instance_contents;strokeColor=#D86613;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#D86613;dashed=0;',

Is it possible to find this "group ID" somewhere in the Draw.io web app?

[tschaffter]

@davidjgraph, do you have insights into the above questions about customizing AWS groups shipped with Draw.io?

[davidjgraph]

No, I don't.