Revamped IBM Stencils with only five static simple shapes and new icons for IBM Cloud.

[jaywarfield]

• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Is your feature request related to a problem? Please describe. The existing IBM stencils that drawio implemented have been excellent but we are no longer submitting updates.

Describe the solution you'd like We would like to request drawio's help to implement the revamped new shapes and icons described here with five static simple shapes using existing drawio features as described in the attached IBMShapes.pdf. This will help to 1) ensure that users can create diagrams for our growing product offerings, and 2) grow our user base on drawio for simple and complex architecture diagrams. The first slide of IBMShapes.pdf describes how the new shapes relate to the old shapes with the new shapes also being simple and static but in code only and using only icons from svg2xml.

The refreshed and validated icons are in the attached IBMIcons directory which includes icons for our latest product offerings including AI. All icons are from our design center with quality processes, and we have recently added additional processes for our icons to work flawlessly with svg2xml.

We are planning on only two sidebars and request that More Shapes contain selections for "IBM Cloud" and "IBM Shapes" sidebars with content as described in the attached IBMSidebars.xlsx, and both sidebars will use the same set of icons. The IBM Shapes sidebar is intended more for non-cloud use cases eventually to grow our user base across multiple use cases in drawio, but most important are the shapes described here for cloud so we can grow our use base on cloud in drawio before looking at other use cases. Let us know if there is another method for providing the details of the sidebars.

Contents of the attached IBMStencils.zip :

1. IBMShapes.pdf – Details for the five new static simple shapes.
2. IBMSidebars.xlsx – Spreadsheet describing contents of IBM Cloud and IBM Shapes sidebars.
3. IBMColors.json – Contains the IBM Color Palette.
4. IBMFonts.json – Contains the IBM Plex Fonts on Google Fonts.
5. IBMIcons – Directory of icon svg files ready for input to svg2xml.

Our shapes will only be static simple shapes using existing drawio features. For other features/complexities we are looking at handling on our side with diagram-as-code as appropriate. We look forward to the drawio team's implementation of this revamped proposal and refining to meet drawio's recommendations and standards. Let us know if you need anything else or have any questions.

Describe alternatives you've considered No alternatives, drawio is the best tool.

Additional context Refer to IBMShapes.pdf for screenshots and details.

[jaywarfield]

Before assigned, the IBMStencils.zip has been kept updated.

When IBM Cloud and IBM Shapes sidebars are available in More Shapes the old sidebar named "IBM" can be removed from More Shapes.

The old nine templates under Cloud / IBM can be removed and we will submit new templates when IBM Cloud and IBM Shapes sidebars are available.

Let me know if you have any questions.

Thanks!

[egrimate]

Just a couple questions:

1. Can you please describe in more detail what dropin images are?
2. Is defining icons ok via style (there is an entry in the style string that defines what icon will be used) or does it explicitly has to be dropping on a shape/container?
3. What is the difference between IBM icons and dropin images?
4. If you want to use IBM Plex Sans, you have to host is somewhere and the link must not change over time. Otherwise the app will regress to a default font.

[egrimate]

Is the updated IBMStencils.zip attached?

Also, adding new icons is fine, but please keep the changes to existing ones to a minimum, since we have to keep all the old variants too.

[jaywarfield]

Yes, defining icons is good via style and is primary use case. Dropin images are secondary use case.

For example, the VPC Virtual Server under IBM Cloud / Compute might include the following in the style (depending on your naming) which has both an IBM icon name (from ibmicons.xml created by svg2xml) in the "icon="and a holder property for a dropin image: shape=mxgraph.ibmshapes.pnode;icon=ibm-cloud--virtual-server-vpc;image=;

The IBM Icon is used but if an image is dropped onto the shape then the IBM Icon is ignored and the dropin image is used and the fillcolor should be changed to white since we don't know the color of the dropin image.

A dropin image is useful if an icon is needed that is not available in the sidebar such as to represent multi-cloud in IBM diagrams. Perhaps a separate shape should be used for dropin images without the "icon=" property.

Since dropin images are secondary and we should review with you what is the best approach, we can exclude dropin images from this request if that is alright.

[jaywarfield]

For fonts, the IBMFonts.json included in the IBMStencils.zip defines the fontCss from Google Fonts and customFonts names. The fontCss will eventually need to include IBM Plex for Chinese which is not available yet.

Semibold (weight 600) works well for shape labels which can be done automatically using the following along with "html=1;" specified in the style: <b style='font-weight:600 >label

If this is confusing with the bold (weight 700) in the Format Panel then shape labels can start out with regular font.

Note that connector labels always start out with regular font.

[jaywarfield]

Yes, the updated IBMStencils.zip is attached in the original description where it says "Contents of the attached IBMStencils.zip":

• IBMColors.json and IBMFonts.json have remained the same.
• IBMShapes.pdf only updated to clarify and simplify descriptions.
• IBMIcons directory updated with additional icons.
• IBMSidebars.xlsx updated with additional icons and connectors, and icon organization to match our new pillars.
• No more changes after 10/5/24.

Let me know if there are any questions.

We understand that once published the icons can't change.

[jaywarfield]

The IBM Cloud sidebar is primary use case. The IBM Shapes (non-cloud) sidebar is secondary use case and needs work to build out and consider how users can set the default "icon=undefined;" to another icon in ibmicons.xml.

Note that both the ibmicons.xml and mxIBMShapes.js (or whatever file names you choose) are used for both the IBM Cloud sidebar and IBM Shapes sidebar.

Since IBM Shapes sidebar is secondary and we should review with you if there is an existing approach for users to change icon names or manually, we can exclude the IBM Shapes sidebar from this request if that is alright.

[davidjgraph]

With the fonts the issue is where will the fonts be hosted? We don't host fonts. There needs to be a fixed, permanent, URL where the font files can referenced from. Is it https://fonts.google.com/specimen/IBM+Plex+Sans?

Or, each user needs to install the fonts locally (which they'd have to do on the desktop version, anyway).

[jaywarfield]

Yes, https://fonts.google.com/specimen/IBM+Plex+Sans is where the font files can be referenced from. There are multiple permanent locations but the drawio docs/blogs mention Google Fonts which is popular.

We document how users can install the Plex fonts locally, but we should also add your point that local is needed for the desktop version.

Arial is recommended as an alternative font that is most similar if Plex is not available. Maybe a consideration could be if drawio didn't find a font that begins with "IBM Plex" then use "Arial", but you may have another default.

A quick way that I use to recognize whether Plex is being used is the lower case L which has a slight right bend at the bottom as in this screenshot: PlexExample.zip

To customize drawio with the IBM Plex Fonts and IBM Color Palette we followed this excellent blog to create the IBMFonts.json (fontCss, customFonts) and IBMColors.json (color schemes, preset colors, default colors, color names, css) included in IBMStencils.zip, intended for loading when the user selects the IBM Cloud sidebar.

Being able to customize the Color Schemes is perfect for our group shapes since we recommend using a light fill color from the same color family as the border color or a fill color of white. For example, Red 50 (#FA4D56) for border color with Red 10 (#FFF1F1) for fill color. The recommended color schemes are included in IBMColors.json.

The JSON files are provided as examples, depending on drawio's direction and how customization is intended outside Confluence.

[jaywarfield]

The complete list for fontFamily with IBM Plex is currently: IBM Plex Sans (default) IBM Plex Sans Arabic IBM Plex Sans Devanagari IBM Plex Sans Hebrew IBM Plex Sans JP IBM Plex Sans KR IBM Plex Sans Thai

The default IBM Plex Sans is needed first.

In IBMFonts.json we include the following import url that was created from Google Fonts with all of the above including the weights 400, 600, 700 and Italic, we use 400 and 600 with IBM Plex but recognize that the Format Panel uses 700 for Bold so that is included also: "@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&family=IBM+Plex+Sans+Devanagari:wght@400;600;700&family=IBM+Plex+Sans+Hebrew:wght@400;600;700&family=IBM+Plex+Sans+JP:wght@400;600;700&family=IBM+Plex+Sans+KR:wght@400;600;700&family=IBM+Plex+Sans+Thai:wght@400;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');"

When Chinese is available in IBM Plex on Google Fonts we would provide an updated import url, depending on drawio's direction and how customization is intended outside Confluence.

[jaywarfield]

In case it would help to see what the end result may look similar to, this diagram was generated by our diagram-as-code (Python to drawio, Terraform to drawio) using static stencils.

[jaywarfield]

Let me know if you have any questions about IBMColors.json and IBMFonts.json in IBMStencils.zip.

Before our mtg we were specifying the font source in the styles and manually selecting stroke and fill colors that correspond to the IBM Color Palette.

Then we moved to the drawio customization:

• For IBMColors.json, using the drawio customization for the IBM Color Palette is excellent, and customizing the color schemes is perfect for us since we recommend using a light fill color from the same color family as the border color or a fill color of white, all combinations are included in our color schemes, and IBMColors.json enables users to know what colors are in the IBM Color Palette.
• For IBMFonts.json, using the drawio customization to include the import url from Google Fonts is also excellent, and we can easily give you an updated import url when Chinese is added to Plex. Google Fonts also makes it easy to create a single import url of all the Plex fonts we select. If you include this import url we would verify all of the languages.

The IBMColors.json (won't change) and IBMFonts.json (easy change when Plex Chinese is available which is the last Plex language) are examples for your consideration, depending on your direction and how customization is intended.

Thanks!

[jaywarfield]

For the IBM Cloud sidebar sheet in IBMSidebars.xlsx with IBMShapes.pdf included in IBMStencils.zip:

• Categories are Groups, Actors, AI, Compute, Containers, Data, DevOps, Network, Observability, Security, Storage, and Connectors (Connectors have labels with end types in parens if any).
• Zone group shape types are set to container=0 and strokeWidth=2 with dashed border.
• All other group shape types are set to container=1 and strokeWidth=1 (one case of strokeWidth=2) with solid border.

For Zone groups with container=0, the excellent feature you implemented for our previous sidebar still applies where selecting shapes inside of container=0 groups may require using alt-click or option-click or change the Z order by moving shapes backward.

The container=0 versus container=1 can be easily missed with the groups, so just emphasizing the container=0 for Zone groups only.

Thanks!

[egrimate]

Please check out our implementation and let us know if it matches your expectations.

https://ea8f1c63.drawio-dev.pages.dev/

[jaywarfield]

Everything looks excellent and works perfectly!

Depending on your direction, is it alright for shape labels to default to 14px and connector labels 12px (although connector labels are added by user), and will changing strokeColor of group border also change sidebar color and icon color.

Only a few minor corrections for your consideration:

1. In Groups category, typo in spreadsheet if you can please change label “Generic Core” to “Generic Group”.
2. In Containers category, if you can please change label for OpenShift, and add Kubernetes Service icon from spreadsheet.
3. In Data category, if you can please change labels for MongoDB and MySQL to mixed case.
4. In Network category, typo in spreadsheet if you can please change Classic Load Balancer to use internal icon name “load-balancer—classic”.

Thanks!

[egrimate]

The minor corrections and shape label sizes are done, but connector labels and color changing needs additional code on project level and there are no short or medium term plans to implement

[jaywarfield]

I understand, continuing to exercise and we really like the implementation, thanks!

[jaywarfield]

If still possible to please check this scenario with container=0 groups: Shapes dropped into a Generic Zone group shape don't move when the Generic Zone is moved as expected, but shapes dropped into other Zone group shapes (such as Security Group) move with the Security Group as if container=1 is set but container=0 is set.

This looks like the only scenario to check.

Thanks!

[egrimate]

Generic Zone fix will be in the next release

[jaywarfield]

Sounds good, all of the Zone shapes correctly have container=0 set, and we'll look forward to the fix in a follow-on release so shapes placed inside the Zone shapes don't move when the Zone shape is moved, which applies to all of the Zone shapes (Access Group, Account Group, Resource Group, Security Group, Instance Group, Placement Group, and Availability Zone). Thanks!