UML Shapes

Available UML Shapes

How to (in the app)

Place a UML shape

1. Open the Architecture toolbar group and choose the UML section (Class, Use Case, Sequence, State, Component, Deployment).
2. Click the shape you want (e.g. Class Box), then click or drag on the canvas to place and size it.
3. Double-click the shape to edit its text — for a class box, type the name, attributes and methods on separate lines.
4. Restyle fill, stroke and text from the Properties panel on the right; both sketch and architectural render styles are supported.

Connect shapes with UML relationships

1. Pick the Arrow tool (A) and drag from one shape to another — hover an edge to snap to a connection point.
2. With the connector selected, choose the arrowhead / line style (open arrow, hollow triangle, filled/hollow diamond, dashed) from the Properties panel to express association, inheritance, composition, aggregation, dependency or implementation.
3. Double-click the connector to add cardinality or role labels (e.g. 1 … 0..*).

Class Diagrams

Model the static structure of a system showing classes, their attributes, methods, and relationships.

Class Box Structure

┌─────────────────────┐
│     ClassName       │  ← Class name (bold)
├─────────────────────┤
│ - privateAttr: Type │  ← Attributes
│ + publicAttr: Type  │
├─────────────────────┤
│ + method(): RetType │  ← Methods
│ - helper(): void    │
└─────────────────────┘

Visibility Modifiers

Relationships

When you import a Mermaid classDiagram, each relationship arrow renders with its proper UML arrowhead (not just a text label). The decoration lands on the correct end automatically — the hollow triangle on the base class, the diamond on the whole/aggregate, the open arrow on the target.

Reversed forms (B --|> A, B --* A, B --o A) and navigable composites/aggregates (A *--> B, A o--> B) are also recognised, and optional cardinality/role labels are preserved, e.g. Subject "1" o-- "0..*" Observer : observers.

Use Case Diagrams

Show system functionality from a user's perspective. Identify actors and the use cases they interact with.

Elements

• Actor (stick figure) - External entity (user, system)
• Use Case (ellipse) - System function
• System boundary (rectangle) - Scope of the system

Relationships

• Association - Actor participates in use case
• Include - Use case includes another (dashed arrow)
• Extend - Optional extension of a use case
• Generalization - Inheritance between actors/use cases

Sequence Diagrams

Show how objects interact over time through message passing.

Elements

Generate from text (DSL)

The fastest way to build a complete sequence diagram is to describe it in the Import Diagram dialog (Mermaid sequenceDiagram syntax or native YSL). Yappy lays out lifelines, cascades the messages, and draws combined fragments, notes and activation bars automatically.

State Machine Diagrams

Model the dynamic behavior of an object through its states and transitions.

Elements

• Initial State - Filled circle (start point)
• State - Rounded rectangle with state name
• Transition - Arrow with event/guard/action
• Final State - Circle with inner filled circle

Transition Syntax

event [guard] / action

Examples:
- click [isEnabled] / doAction()
- timeout / retry()
- submit [isValid]

Component Diagrams

Show the organization and dependencies among software components.

Elements

• Component - Rectangle with component icon
• Interface (provided) - Lollipop symbol
• Interface (required) - Socket symbol
• Port - Small square on component edge

Deployment Diagrams

Show how software is deployed onto hardware/runtime nodes and which artifacts run where. Find Deployment Node and Artifact in the Architecture toolbar group (UML Structure section), or via DSL with [node] / [artifact].

Both render in sketch and architectural styles and accept full fill / stroke / text styling.

UML Best Practices

• Keep it simple - Don't try to model everything
• Use consistent notation - Follow UML conventions
• Label relationships - Add multiplicities and roles
• Group related elements - Use packages for organization
• Add notes - Clarify complex parts with annotations

Scripting (API)

UML shapes are created from the console via the global window.Yappy object using the generic createElement(type, x, y, width, height, options), then connected with createArrow.

// Two classes with an inheritance relationship
const base = Yappy.createElement('umlClass', 200, 80, 180, 120, {
  containerText: 'Shape\\n- x: number\\n- y: number\\n+ area(): number',
});
const sub = Yappy.createElement('umlClass', 200, 260, 180, 120, {
  containerText: 'Circle\\n- r: number\\n+ area(): number',
});
// Sub -> Base (style the arrowhead as a hollow triangle in the panel)
Yappy.createArrow(290, 260, 290, 200);

UML type strings include: umlClass, umlInterface, umlEnum, umlObject, umlActor, umlUseCase, umlLifeline, umlState, umlAction, umlHistory, umlComponent, umlPackage, umlNode, umlArtifact, umlPort, umlProvidedInterface, umlRequiredInterface, umlSignalSend, umlSignalReceive, umlFragment, and umlNote.