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

1. Download the library from https://raw.githubusercontent.com/uroesch/drawio-lib-mockup-keycloak/main/libs/mockups-keycloak.xml.

2. 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.

1. Forms: These are they actual forms that can be placed in windows frames.

2. Windows: Generally forms with windows and keycloak logos around them.

3. 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