Common Attributes

Shared properties and metadata supported across all DrakoFlow components.

Vector Icons & Extensibility

Attach clean vector logos to any component label using the icon property. Icons automatically adapt to component text colors and themes.

Supported Built-in Icons

How to Add New Icons

To add custom vector icons to the DrakoFlow engine:

1. Open src/utils/IconRegistry.ts in the codebase.
2. Add a new entry to the ICON_PATH_MAP object mapping your icon keyword to its SVG inner XML.
3. Ensure the SVG path uses fill="currentColor" or fill-rule="evenodd" so it automatically inherits component colors across all dark and light themes.

Example DSL Usage

AuthService: Cube {
  label: "Auth API"
  icon: "docker"
}

UserDB: Cylinder {
  label: "User Store"
  icon: "postgres"
}

CloudInfra: Cloud {
  label: "AWS Cloud"
  icon: "aws"
}

Keyboard Shortcuts

Work faster with built-in editor shortcuts.

Rectangle Component

A standard rectangular component supporting corner rounding, label text, and local styling overrides.

Properties

Theme Overrides (Inside themeOverride block)

Example Usage

Database: Rectangle {
  label: "User Store"
  rx: 8
  ry: 8
  themeOverride: {
    backgroundColor: "#1e1e2e"
    borderColor: "#cdd6f4"
    textColor: "#f5e0dc"
  }
}

Process Component

A process step box with vertical segment lines, commonly used in flowchart steps or sequence actors.

Properties

Theme Overrides (Inside themeOverride block)

Example Usage

Client: Process {
  label: "Client App"
  lifeline: true
  themeOverride: {
    backgroundColor: "#2e3440"
    borderColor: "#88c0d0"
    textColor: "#eceff4"
  }
}

Circle / Ellipse Component

Renders a circle (using radius) or an oval/ellipse shape (using rx and ry).

Properties

Theme Overrides (Inside themeOverride block)

Example Usage

StartNode: Ellipse {
  label: "Start"
  radius: 35
  themeOverride: {
    backgroundColor: "#a3be8c"
    borderColor: "#4c566a"
    textColor: "#2e3440"
  }
}

Vertical Container Component

A container layout that stacks nested child components vertically with customizable gaps and padding.

Properties

Theme Overrides (Inside themeOverride block)

Example Usage

MyContainer: VerticalContainer {
  label: "User Module"
  gap: 15
  padding: 20
  
  UserObj: Rectangle {
    label: "User Entity"
  }
}

Cylinder Component

A 3D cylinder shape commonly used to represent databases or data stores.

Properties

Example Usage

UserDB: Cylinder {
  label: "User Data Store"
}

Cube Component

A 3D isometric box shape commonly representing services, processes, or modules.

Properties

Example Usage

AuthService: Cube {
  label: "Auth Service"
}

Diamond Component

A diamond shape used for decision gateways or conditional branches in flowcharts.

Properties

Example Usage

CheckAuth: Diamond {
  label: "Authorized?"
}

Hexagon Component

A flat-topped hexagon shape commonly representing subsystems, domains, or nodes.

Properties

Example Usage

BillingSystem: Hexagon {
  label: "Billing Domain"
}

Actor Component

A UML stick figure representing system users, actors, or external integrations.

Properties

Example Usage

User: Actor {
  label: "Customer"
}

Parallelogram Component

A skewed parallelogram shape representing data, input/output files, or reports.

Properties

Example Usage

CsvData: Parallelogram {
  label: "Upload File"
}

Class / List Component

A multi-compartment shape for UML class diagrams (with attributes and methods sections) or structured lists (with a header and item rows). Compartments are separated by semicolons.

Properties

Theme Overrides (Inside themeOverride block)

Access Modifier & Styling Symbols (PlantUML-style)

UML Class Example

UserService: Class {
  label: "UserService"
  attributes: {
    * +id: string
    +name: string
    -passwordHash: string
    #createdAt: Date
  }
  methods: {
    +getUser(): User
    +saveUser(): void
    -validate(): boolean
    ~auditLog(): void
  }
}

Plain List Example

Requirements: Class {
  label: "Requirements"
  items: {
    Auth via OAuth 2.0
    Rate limiting per IP
    Audit logging
    GDPR compliance
  }
}

Interface Component

A UML interface shape — rectangle with an «interface» stereotype label in italics above the bold interface name, and a separator line below the header for method rows.

Properties

Example Usage

Serializable: Interface {
  label: "Serializable"
}

IRepository: Interface {
  label: "IUserRepository"
  themeOverride: {
    borderColor: "#7aa2f7"
    textColor: "#cdd6f4"
  }
}

Component Shape

A UML component box — rectangle with the standard two-notch component icon on the right side, representing a deployable software component or service.

Properties

Example Usage

PaymentService: UMLComponent {
  label: "PaymentService"
}

AuthService: UMLComponent {
  label: "AuthService"
  themeOverride: {
    borderColor: "#9ece6a"
  }
}

Module Shape

A file-card shape with a small tab on the top-left corner — commonly used to represent a code module, file, or library unit.

Properties

Example Usage

AuthModule: Module {
  label: "auth.module"
}

HttpModule: Module {
  label: "http.module"
  themeOverride: {
    borderColor: "#bb9af3"
  }
}

Package Shape

A UML package — folder-style shape with a wider angled tab on the top-left that displays the package name, and a large open body area for nested elements.

Properties

Example Usage

AuthPackage: Package {
  label: "com.example.auth"
  gap: 15
  padding: 20
  
  AuthService: UMLComponent {
    label: "AuthService"
  }
}

InfraPackage: Package {
  label: "com.example.infra"
  themeOverride: {
    borderColor: "#f7768e"
    backgroundColor: "#1a1b26"
  }
}

Simple Text Component

Renders a single-line text label without any box or border, useful for annotations or standalone headers.

Properties

Example Usage

NoteLabel: Text {
  label: "This is a standalone note"
  align: "left"
  themeOverride: {
    textColor: "#a1a1aa"
  }
}

Paragraph Text Component

Renders a multi-line paragraph block of text. Supports explicit newlines (\n) for multi-line formatting.

Properties

Example Usage

DescBlock: Paragraph {
  text: "1. Perform user verification\n2. Call authorization subsystem\n3. Return result payload"
  align: "left"
}

SVG Image Component

Renders a vector graphic inside the diagram using raw inline SVG code. The graphic can be scaled dynamically.

Properties

Example Usage

LogoNode: SVGImage {
  content: "<svg width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#3b82f6\" stroke=\"#ffffff\" stroke-width=\"4\"/></svg>"
  scale: 1.5
}

Raster Image Component (Base64)

Renders standard raster images (PNG, JPEG, GIF) directly inside the canvas by pasting their base64 encoded text.

Properties

Example Usage

AvatarNode: RasterImage {
  content: "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
  scale: 4.0
}

Common Element Attributes

These general attributes and blocks are supported by all diagram elements inside DrakoFlow.

General Properties

Theme Override block (themeOverride)

Customize an individual element's visual presentation using style properties inside a nested block:

Directives & Tagging (@tags)

You can associate array-based tag qualifiers immediately before an element declaration to enable diagram-wide filtering:

@tags: ["database", "infrastructure"]
myDatabase: Rectangle {
  label: "User DB"
  doc: "Stores application user accounts."
}

Layout Flow Directives (@layout)

You can specify the layout flow direction algorithm for your diagram using the global @layout directive at the top of the file:

@layout: top-to-bottom

client: Process {
  label: "Client App"
}
server: Process {
  label: "Server App"
}
client -> server : "API Request"

Supported layout types:

• left-to-right (Default) - Elements are arranged horizontally from left to right.
• top-to-bottom - Elements are arranged vertically from top to bottom.
• git-flow - Specialized Git Flow branching and merging visualization with branch lanes, curved forks/merges, and slanted commit badges using Branch and Commit components.
• mindmap or mindmap(RootNode) - Specialized radial mindmap layout engine with automatic root node detection (or explicit root parameter), branch color inheritance, and organic Bézier curved connectors.

Keyboard Shortcuts

DrakoFlow supports standard editor key combinations for faster navigation and file management.

Shortcuts List

Cloud Component

A container component styled as a cloud, ideal for representing external services, APIs, or internet-based infrastructure networks.

Properties

Example Usage

AWSCloud: Cloud {
  label: "Amazon Web Services"
  padding: 30
}

Node Component

A 3D box component representing a physical machine, virtual server, or device. Nodes can host other sub-components.

Properties

Example Usage

WebServer: Node {
  label: "Ubuntu App Server"
  
  AppInstance: Rectangle {
    label: "Node.js Application"
  }
}

Artifact Component

Represents a deployed file or software package (like a JAR, zip, or executable), decorated with a document sheet icon in the top-right corner.

Properties

Example Usage

DeployableArchive: Artifact {
  label: "drakoflow-v1.war"
}

Folder Component

A container component styled as a folder outline. Useful for showing file-system structures or grouping related packages.

Properties

Example Usage

StaticAssets: Folder {
  label: "public/img"
  
  LogoImage: Rectangle {
    label: "logo.png"
  }
}

Frame Component

A general-purpose container representing a logical boundaries frame. Displays a top-left title tab with an angled cut.

Properties

Example Usage

AuthFrame: Frame {
  label: "Authentication Subsystem"
  
  LoginAPI: Rectangle {
    label: "/api/login"
  }
}

Storage Component

Represents a storage volume or storage drum, rendered as a horizontal cylinder/barrel.

Properties

Example Usage

BackupDrive: Storage {
  label: "NAS Backup Volume"
}

Stack Component

A component styled as a stack of boxes to represent layered components or clusters of similar instances.

Properties

Example Usage

AppReplica: Stack {
  label: "App Nodes (3x Replicas)"
}

File Component

A clean sheet of paper representation with a folded top-right corner to indicate a file resource.

Properties

Example Usage

ConfigFile: File {
  label: "config.json"
}

Card Component

A clean, modern container styled as a card with a left-accent color stripe representing smaller hosts, tasks, or logical components.

Properties

Example Usage

TaskItem: Card {
  label: "Background Job"
  padding: 12
}

Table Component

A tabular grid layout that displays rows and columns of text, ideal for architecture comparisons, API mapping tables, or data listings.

Properties

Example Usage

MyTable: Table {
  header: { "Header 1", "Header 2", "Header 3" }
  rows: {
    { "row 1, cell 1", "row 1, cell 2", "row 1, cell 3" }
    { "row 2, cell 1", "row 2, cell 2", "row 2, cell 3" }
  }
  headerAtTop: true
  headerAtBottom: false
}

Use Case Component

A horizontal flat ellipse representing system use cases or user goals.

Properties

Example Usage

Checkout: Usecase {
  label: "Checkout Item"
}

Robustness Boundary Component

A robustness diagram boundary node representing user interfaces, APIs, or system boundaries.

Properties

Example Usage

LoginUI: Boundary {
  label: "Login Form"
}

Robustness Control Component

A robustness diagram control node representing business logic, loop controllers, or orchestrators.

Properties

Example Usage

AuthMgr: Control {
  label: "Auth Manager"
}

Robustness Entity Component

A robustness diagram entity node representing database records, persistent data structures, or server models.

Properties

Example Usage

UserRecord: Entity {
  label: "User Entity"
}

Queue Component

A horizontal cylinder tube representing a message broker, FIFO queue, or streaming data pipeline.

Properties

Example Usage

MsgBus: Queue {
  label: "Kafka Topic"
}

Collections Component

Representing multiple stacked participants, drawn as two overlapping offset rectangles.

Properties

Example Usage

Subscribers: Collections {
  label: "User List"
}

Agent Container Component

An active software agent container styled with a premium double-line outline. Supports nesting child components inside.

Properties

Example Usage

WorkerAgent: Agent {
  label: "Billing Agent"
  
  WorkerJob: Rectangle {
    label: "Process Invoice"
  }
}

Enum Component

Renders a UML enumeration class showing the «enumeration» stereotype above the enum name.

Properties

Example Usage

Status: Enum {
  label: "UserStatus"
  items: {
    ACTIVE
    INACTIVE
    SUSPENDED
  }
}

Abstract Class Component

Renders a UML abstract class with italicized bold title name and a «abstract» stereotype row.

Properties

Example Usage

BaseSvc: Abstract {
  label: "BaseService"
  attributes: {
    #dbConnection: Connection
  }
  methods: {
    +connect(): void
    #execute(): ResultSet
  }
}

Annotation Component

Renders a UML annotation class showing the «annotation» stereotype row.

Properties

Example Usage

EntityAnn: Annotation {
  label: "Entity"
  attributes: {
    tableName: String
  }
}

Struct Component

Renders a UML structure showing the «struct» stereotype row above the structure name.

Properties

Example Usage

UserDto: Struct {
  label: "UserDTO"
  attributes: {
    id: UUID
    username: String
    email: String
  }
}

Object Component

Renders a UML object instance with the header label underlined, typically representing instances in Object Diagrams.

Properties

Example Usage

userInstance: Object {
  label: "alice : User"
  attributes: {
    id = "usr_001"
    name = "Alice"
    role = "Admin"
  }
}

Branch Component

Represents a Git branch guide lane in a Git Flow diagram (@layout: git-flow). Renders horizontal dashed guide tracks and left-aligned branch pill badges with theme-adaptive colors. Fully compatible with other components like Text, VerticalContainer, and architecture shapes.

Properties

Example Usage

Main: Branch {
  label: "main"
  order: 0

  c0: Commit { hash: "0-init" }
  c3: Commit { type: "merge" }
}

Commit Component

Represents an individual commit on a Git branch track. Displays commit circles, slanted -45° commit hash badges, tag pills, and specialized merge double-ring nodes.

Properties

Example Usage

c1: Commit {
  hash: "1-feat"
  tag: "v1.0"
  type: "normal"
}

c2: Commit {
  type: "merge"
}

Chart Component (Bar & Line Series)

Multi-series interactive bar and line charts with customizable axes, step ranges, and hover tooltips.

Chart Properties

Child Series (Bar & Line)

Example Usage

MyChart: Chart {
  width: 800
  height: 600
  title: "Sales Revenue"
  xLabel: "Months"
  yLabel: "Revenue (in $)"
  x: [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
  y: 4000 -> 11000

  MyBarChart: Bar {
    values: [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    color: #38bdf8
    is3D: true
  }

  MyLineChart: Line {
    values: [5500, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    color: #4ade80
    filled: true
  }
}