Theming diagrams

Capable Diagrams supports the styling of diagrams in a flexible and user-friendly manner. This styling can be easily applied through the visual editors, including Capable, Excalidraw, and BPMN, by using their dedicated formatting panels. In addition to these visual tools, certain text-based diagrams also allow for styling to be applied effectively.

#Using AI

If you have AI features enabled within your application, you can easily request Capable AI to apply a colour theme to your diagram. This intelligent system will automatically analyse the diagram and determine the appropriate syntax needed to implement the new theme effectively.

Once you make the request, Capable AI takes care of all the necessary steps behind the scenes, ensuring that the colour theme is applied accurately and seamlessly without requiring any manual input from you.

#Manually

#Mermaid

Mermaid supports styling through style, classDef, and class statements. Use these to set properties such as a shape’s background colour, border colour, stroke width, and text colour.

flowchart LR
  A[Start] --> B[Process] --> C[Done]

  %% Style a single node
  style A fill:#E3F2FD,stroke:#1565C0,stroke-width:2px,color:#0D47A1

  %% Define a reusable class and apply it to nodes
  classDef success fill:#E8F5E9,stroke:#2E7D32,stroke-width:2px,color:#1B5E20
  class B,C success

In Mermaid, fill changes the shape background, stroke changes the outline, stroke-width changes the outline thickness, and color changes the text colour.

#PlantUML

PlantUML supports styling through inline skin parameters and the modern <style> block. For current diagrams, prefer <style> because it lets you target element types, stereotypes, and individual groups of elements more clearly.

@startuml
<style>
rectangle {
  BackgroundColor #FFF3E0
  BorderColor #EF6C00
  FontColor #E65100
  LineThickness 2
}

rectangle.success {
  BackgroundColor #E8F5E9
  BorderColor #2E7D32
  FontColor #1B5E20
}
</style>

rectangle "Default styled shape" as A
rectangle "Success shape" as B <<success>>
A --> B
@enduml</success>>

In PlantUML, BackgroundColor changes the shape background, BorderColor changes the outline, FontColor changes the text colour, and LineThickness changes the outline thickness.