draw.io

draw.io is free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams.

Use the free Online Tool with a cloud storage or download the desktop app and work locally.

BTP Solution Diagram Repository

SAP is offering the BTP Solution Diagram Repository single source of truth for BTP Architects. The repository includes latest updates and ready-to-use templates to develop high quality diagrams of architectural landscapes.

Setup

Use the draw.io online editor and import relevant libraries by:

1. Copy relevant library uri to clipboard using Copy Action
2. Use Menu File -> Open Library from -> URL... and paste uri

Available Libraries

How does it look like?

Develop a CAP-based (multitenant) application using GenAI and RAG

Tips

Recoloring SVG Icons

It is possible to recolor imported svg icons using the Style panel, if the svg is using class variables to control fill style:

• Use Menu Edit -> Edit Style...
• Insert editableCssRules=.*; behind shape=image:
• Inside Style Panel change fill color for used class .cls-1 (multiple class names will be shown separately)

Hand-Drawn Style

Besides the Sketch Feature, it is possible to apply the rough style which leverages the rough.js library.

While exporting diagrams, you have to choose the appearance to be Light or Dark. This is somehow problematic, if you use the diagram in sites that allow to toggle the Appearance.

A simple workaround is using a Dark/Light unified background like a chalkboard:

draw.io sketch style on chalkboard

Apply sketch style on imported SVG assets

Sketch style is currently not applied on imported SVG assets, but you can use the online tool Svg2Rough.js to manually adapt them.