Skip to main content

Component Diagram

In Unified Modeling Language (UML), a component diagram depicts how components are wired together to form larger components or software systems. They are used to illustrate the structure of arbitrarily complex systems.


Components and Interfaces

You can define a component in multiple ways, inside brackets or with the component keyword.

Interface can be defined using the () symbol, or the interface keyword.

And you can define an alias, using the as keyword. This alias will be used later, when defining relations.

  title: Component Diagram Components and Interfaces

  component comp1
  [component 3] as comp3
  component comp4 [
    This component has
    long description

  interface "I1"
  () "I2"
  () "I3" as interf3


Relations between elements are made using combinations of dotted line (..), straight line (--), and arrows (-->) symbols.

  DataQuery -- [Component]
  [Component] ..> HTTP : use


You can use several keywords to group components and interfaces together:

  • package
  • node
  • folder
  • frame
  • cloud
  • database
  • rectangle
  • component

package "Some Group" {
  [First Component]
  HTTP -- [First Component]
  [Another Component]

node "Other Groups" {
  [Second Component]
  FTP -- [Second Component]
  [First Component] --> FTP

cloud "Cloud" {
  [Example 1]

database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  frame "Foo" {
    [Frame 4]

[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]

Override config

You can override diagarm config through @param directive.

All available configs can be seen in the Config page.

  @param componentBackground #61afef
  @param componentBorderColor #61afef

  DataQuery -- [Component]
  [Component] ..> HTTP : use