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

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.

componentDiagram
  title: Component Diagram Components and Interfaces

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

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

Relations​

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

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

Grouping​

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

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

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 diagram config through @param directive.

All available configs can be seen in the Config page.

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

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

Selectors For Custom Style​

  1. id node-{name} for component/interface
  2. class component__interface for all interfaces
  3. class component__component for all components
@pre
@style {
  .component__interface {
    backgroundColor: #61afef;
  }

  #node-IDeletable {
    backgroundColor: red;
  }
}
@endpre

componentDiagram
  [folder]
  () IAccessible
  () IDeletable
  [folder] --> IAccessible
  [folder] --> IDeletable