Skip to Content
Technical Articles
Author's profile photo Geert-Jan Klaps

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

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 Mauricio Lauffer)

Creating architecture diagrams with code | SAP Blogs (by Antonio Maradiaga)

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%20draw.io%20library

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%20Diagram%20Icons%20Generator

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%20Diagram%20Icons%20Generator%20-%20Folder%20Structure

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!

 

Assigned Tags

      19 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Christian Braukmüller
      Christian Braukmüller

      Geert-Jan Klaps I love you for doing this 😍

      Author's profile photo Geert-Jan Klaps
      Geert-Jan Klaps
      Blog Post Author

      Hope you enjoy! 😀

      Author's profile photo Piotr Tesny
      Piotr Tesny

      Hello, nice but not working with node14js. However it seems it works with node16js. cheers;

      $ node -v
      v14.18.2
      $ yo btp-diagram-icons
      
           _-----_     ╭──────────────────────────╮
          |       |    │    Welcome to the SAP    │
          |--(o)--|    │    Business Technology   │
         `---------´   │  Platform (BTP) diagram  │
          ( _´U`_ )    │     icon generator !     │
          /___A___\   /╰──────────────────────────╯
           |  ~  |     
         __'.___.'__   
       ´   `  |° ´ Y ` 
      
      ? Do you want to generate circled icons? Yes
      ? Do you want to generate SAP icons? Yes
      ? Do you want to group icons by category? Yes
      Getting services from SAP discovery-center
      Downloading service icons
      Error btp-diagram-icons 
      
      element.Category.replaceAll is not a function
      Author's profile photo Gregor Wolf
      Gregor Wolf

      I would suggest you file this as an issue in the GitHub project: generator-btp-diagram-icons and maybe you can contribute the fix as a pull request :-).

      Author's profile photo Piotr Tesny
      Piotr Tesny

      https://github.com/geert-janklaps/generator-btp-diagram-icons/issues/1

      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer

      This is great!

      Just a correction, the draw.io library I shared doesn't use outdated icons. Few days after posting the blog, I've created a PR to automatically create the library using the icons from Discovery Center, just as you did now. Then, I changed it to get the icons and data from the new BTP Service Metadata project.

      Author's profile photo Geert-Jan Klaps
      Geert-Jan Klaps
      Blog Post Author

      Hi Maurico,

      I completely missed this PR! I actually started the solution before TechEd and just finished it this weekend. Great to see that other people are looking into a similar solution!

      I personally didn't start from a draw.io perspective, but rather from a file-based perspective. I'm still deciding if draw.io will be my main go to for my solution diagrams. The draw.io library was a quick win as the format is so straight forward. (Might add additional libraries in the future depending on the final solution I choose, like e.g. Viso)

      I've updated my blog, with a link to this comment!

      Cheers,

      Geert-Jan

      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer

      That's exactly what I loved in your solution. It's creating the foundation for any other tool, people can build on top of that as they need.

      Great to see a lot of innovation coming from the community, building the tools we need and SAP doesn't provide  🙂

       

      Author's profile photo Vincent Tran
      Vincent Tran

      Keep up the good work! Thanks

      Author's profile photo Remi ASTIER
      Remi ASTIER

      What's the difference with the UI5 icon explorer?

      Author's profile photo Holger Schäfer
      Holger Schäfer

      Great idea!

      Sadly, for new services, SAP introduces sometimes bitmap images instead svg and i have to manually optimize them for my btp.udina.de site with photoshop.

      Currently, only Private Link Service seems to be png, so here is my vectorized png (if the tool does not vectorize).

      https://btp.udina.de/images/btp/extension-suite/private-link-service.svg

      But anyhow, i will use your tool to see a diff of my files.

      Thanks for sharing.

      Holger

      Author's profile photo Sandesh Kurumella
      Sandesh Kurumella

      Hello All, It doesn't seem to work when I execute the command 'yo btp-diagram-icons'. I get the below error

      Cannot find module 'C:\Users\sandesh\AppData\Roaming\npm\node_modules\generator-btp-diagram-icons\node_modules\@ui5\webcomponents-icons-tnt\dist\generated\assets\SAP-icons-TNT.json'

      If I get into the 'assets' folder, I see there are 'v2' and 'v3' folders in which this .json file exists.

      Author's profile photo Geert-Jan Klaps
      Geert-Jan Klaps
      Blog Post Author

      Should be fixed in version 0.0.3, which was just uploaded to npm.

      Author's profile photo Thomas Neuhaus
      Thomas Neuhaus

      Hello

      The same error

      Cannot find module '/usr/local/lib/node_modules/generator-btp-diagram-icons/node_modules/@ui5/webcomponents-icons-tnt/dist/generated/assets/SAP-icons-TNT.json'

      (node:34070) [DEP0164] DeprecationWarning: Implicit coercion to integer for exit code is deprecated.

      (Use `node --trace-deprecation ...` to show where the warning was created)

      Regards Thomas

      Author's profile photo Geert-Jan Klaps
      Geert-Jan Klaps
      Blog Post Author

      Should be fixed in version 0.0.3, which was just uploaded to npm.

      Author's profile photo Ian Stubbings
      Ian Stubbings

      Hi

      Same error here as well

       

      Cannot find module '/usr/local/lib/node_modules/generator-btp-diagram-icons/node_modules/@ui5/webcomponents-icons-tnt/dist/generated/assets/SAP-icons-TNT.json'

       

      Regards

      Ian

      Author's profile photo Geert-Jan Klaps
      Geert-Jan Klaps
      Blog Post Author

      Should be fixed in version 0.0.3, which was just uploaded to npm.

      Author's profile photo Ian Stubbings
      Ian Stubbings

      Many thanks Geert-Jan Klaps . All sorted now and icons downloaded 👍

      Author's profile photo Rene Jurmann
      Rene Jurmann

      Hi,

      after installing the generator using "npm install -g yo generator-btp-diagram-icons" I get following error trying to download the icons using "yo btp-diagram-icons":

       

      Error btp-diagram-icons

      require() of ES Module C:\Users\...\AppData\Roaming\npm\node_modules\generator-btp-diagram-icons\node_modules\svgdom\main-module.js from C:\Users\...\AppData\Roaming\npm\node_modules\generator-btp-diagram-icons\generators\app\index.js not supported.
      Instead change the require of main-module.js in C:\Users\...\AppData\Roaming\npm\node_modules\generator-btp-diagram-icons\generators\app\index.js to a dynamic import() which is available in all CommonJS modules.

       

      I fixed this issue locally on my computer by editing the "index.js" in folder "C:\Users\...\AppData\Roaming\npm\node_modules\generator-btp-diagram-icons\generators\app"

      Here I removed lines 6 and 7:

      const { createSVGWindow } = require("svgdom");
      const { SVG, registerWindow } = require("@svgdotjs/svg.js");

       

      Then I made function "generateCircledIcon" in line 118 an "async" function and added following lines at the beginning of this function

      const { createSVGWindow } = await import('svgdom')
      const { SVG, registerWindow } = await import("@svgdotjs/svg.js");

       

      Now everything worked fine.

      But can this probably be also changed in the official version?

       

      René