Catppuccin
Catppuccin color palette for PlantUML diagrams.
How to use
In order to use this theme with mkdocs_puml, set theme config of the plugin as follows:
plantuml :
theme :
light : catppuccin/latte
dark : catppuccin/mocha
Flavors
All four flavors of catppuccin are implemented for PlantUML
and C4 extension.
Special Flavor
A special latte-white flavor has been added to this theme,
setting the base color to #ffffff instead of catppuccino's #eff1f5.
Some users may find it more appealing when used with light mode.
Examples
Let's see how various diagrams look with this theme.
Class Diagram
Sequence
Entity
catppuccin/latte catppuccin/latte-white catppuccin/frappe catppuccin/macchiato catppuccin/mocha
Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR
Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR
Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR
Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR
Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR Database Entities Database Entities authentication.models projects.models user_cards.models user_devices.models User id: INT<PK> email: VARCHAR<unique, case_insensitive> password: VARCHAR<argon2> is_staff: BOOLEAN is_superuser: BOOLEAN is_active: BOOLEAN last_login_at: TIMESTAMP created_at: TIMESTAMP Project id: INT<PK> user: INT<FK> name: VARCHAR last_updated_at: TIMESTAMP created_at: TIMESTAMP UML id: INT<PK> project: INT<FK> c4_type: ENUM diagram: TEXT Card id: INT<PK> user: INT<FK> stripe_token: VARCHAR name: VARCHAR last_numbers: VARCHAR(4) created_at: TIMESTAMP PhoneDevice id: INT<PK> user: INT<FK, unique> phone_number: VARCHAR<unique=True> secret_key: VARCHAR
Timing
C4
catppuccin/latte catppuccin/latte-white catppuccin/frappe catppuccin/macchiato cattpuccin/mocha
«container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes «container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes
«container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes «container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes
«container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes «container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes
«container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes «container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes
«container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes «container_boundary» «boundary» Databases [container] «container» Database [Microsoft SQL] Holds product, order and invoice information «container» Cache & MB [Redis] Cache and simple message broker «person» Customer People that need products «container» SPA [angular] The main interface that the customer interacts with «container» API [java] Handles all business logic Uses Uses Reads/Writes
