Keycloak Mockups Shape Library for draw.io

This is an extension for to create Keycloak mockups that integrate seamlessly into mockup shapes included with the draw.io application.

Usage

Start app.diagrams.net with keycloak mockkup library

Simply click on the Mockup - Keycloak link to load the library into the online version.

Import manually into app.diagrams.net

Navigate to the File menu and select Choose Library… in the flyout pick URL…. In the dialog paste the this url https://raw.githubusercontent.com/uroesch/drawio-lib-mockup-keycloak/main/libs/mockups-keycloak.xml

Import manually into locally running app

Download the library from https://raw.githubusercontent.com/uroesch/drawio-lib-mockup-keycloak/main/libs/mockups-keycloak.xml.
Navigate to the File menu and select Choose Library… in the file picker dialog select the previously downloaded file.

Shapes

There are three type of stencils / shapes included in this library.

Forms: These are they actual forms that can be placed in windows frames.
Windows: Generally forms with windows and keycloak logos around them.
Logos: Keycloak logos which can be placed in windows.

Forms

Register (full)
Register (short)
Sign in (simple)
Sign in (register)
OTP setup
Second factor

Windows

Empty window
Keycloak window
Keycloak window with realm
Email client with registration mail
Keycloak window registration success
Keycloak window registration form
Keycloak window admin sign in
Keycloak window user sign in
Keycloak window OTP setup
Keycloak window second factor

Logos

Keycloak simplified logo