Business Technology Platform solution diagrams and icons taken to the next level

[geert-janklaps]

A few years back the introduction of the SAP Icons & Samples for solution diagrams eased our lives as a BTP architects. It was / is great to have all icons available and a set of templates as a basis to start from (although PowerPoint is not the best solution in my personal opinion).

Announcement blog:

Be Visual! Use Official Icons and Samples for SAP Business Technology Platform Solution Diagrams | S...

In the meanwhile, the original Wiki page has already been removed and it's now only possible to download the templates & icons through direct links provided in the comments. Unfortunately, the last update of the SAP BTP Icons dates from somewhere around March 2021.

A few weeks ago, I saw a few new blogs, reusing the same outdated icons for draw.io. Which is an absolutely great alternative compared to the PowerPoint templates.

Create SAP BTP solution diagrams with Draw.io (Diagrams.net) | SAP Blogs (by mauriciolauffer)

Creating architecture diagrams with code | SAP Blogs (by ajmaradiaga)

Edit: The original solution Mauricio mentioned in his blog, does contain updated icons, which I missed while I wrote this blog and created this solution. (See Mauricio's comment below)

So, that got me thinking, how can I make sure I have all latest BTP icons available to use them in my solution / architecture diagrams? I came up with a few requirements I wanted to have available in my solution diagrams:

1. Latest version of BTP service icon as-is


2. Latest version of BTP service icon surrounded by a circle (as typically seen in the previous libraries)


3. Generic SAP Icons (as included in SAP Fiori)

 

Introducing the BTP Diagram Icon generator

The BTP Diagram Icon Generator is a yeoman generator that:

• Downloads the latest BTP service icons from the SAP Discovery Center


• Generates a version of the service icon surrounded by a circle


• Uses the UI5 Web Components to extract the Fiori icons

Icons are generated in two formats, file-based in a folder structure so that they can be used in any diagram designing tool and as a draw.io / diagrams.net library which can easily be imported.

Icons can be organized by category as defined in the SAP Discovery Center or by type.

Generated draw.io / diagrams.net library

 

Using the BTP Diagram Icon Generator

Generating your own BTP diagram icons is a matter of installing Nodejs, yeoman generator and the BTP Diagram Icon Generator itself.

First download and install Nodejs for your OS.

After installing Nodejs open a terminal / command-line and execute following command:

npm install -g yo generator-btp-diagram-icons

Now you're ready to run the generator! In the terminal / command-line, navigate to the folder where you want the icons to be generated and execute following command:

yo btp-diagram-icons

BTP Diagram Icons Generator

After the generator is finished, your folder will contain a set of folders containing the icons and libraries based on the choices made in the generator.

BTP Diagram Icons Generator - Folder Structure

• btp: BTP service icon files (regular & circled)


• icons: SAP Fiori icon files


• libraries: draw.io / diagrams.net libraries

 

Wrap-up

You now have the latest icons available for all your BTP solution diagrams! Whenever a new service is released, it's just a matter of running the generator again and the new service icon will be generated automatically!

Hope you enjoy this new open-source solution and happy diagramming!