Kroki A11Y playground

Diagram typeplantumlmermaidKroki serverkroki.io (online)localhost:8000 (docker local)Custom URL

Kroki status:Unknown

Source (plantuml)@startuml skinparam classAttributeIconSize 0 class Order { +id : OrderId +status : OrderStatus +customerId : CustomerId +totalAmount : Money +place() : void } class OrderLine { +id : OrderLineId +productId : ProductId +quantity : int +unitPrice : Money } class Customer { +id : CustomerId +email : EmailAddress +name : Name } interface PaymentPort { +authorize(amount : Money) : PaymentResult } Order *-- OrderLine : contains Order --> Customer : for Order ..> PaymentPort : uses @enduml

No diagram rendered yet. Click Render preview.

Kroki render preview (For devs)

Endpoint: https://kroki.io/plantuml/svg

Plugin-like UI toggles

hideSourcehideA11yshowDiagramModeToggle (PlantUML class diagrams)showDiagramLegend (For devs only)

PlantUML source for "Playground preview"

@startuml
skinparam classAttributeIconSize 0

class Order {
  +id : OrderId
  +status : OrderStatus
  +customerId : CustomerId
  +totalAmount : Money
  +place() : void
}

class OrderLine {
  +id : OrderLineId
  +productId : ProductId
  +quantity : int
  +unitPrice : Money
}

class Customer {
  +id : CustomerId
  +email : EmailAddress
  +name : Name
}

interface PaymentPort {
  +authorize(amount : Money) : PaymentResult
}

Order *-- OrderLine : contains
Order --> Customer : for
Order ..> PaymentPort : uses
@enduml

Playground options

Use the controls in the playground to demo this behavior live:

• showDiagramModeToggle: enables For devs / Simpler for PlantUML class diagrams.
• showDiagramLegend: adds a relation legend in For devs mode only.
• hideSource and hideA11y: simulate plugin tab visibility choices.
• Diagram type and Kroki server: switch between PlantUML/Mermaid and endpoint presets.

Tip: with local Docker Kroki (docker compose -f docker-compose.kroki.yml up -d), you can test offline and keep rendering stable during demos.

Class diagrams like domain models now in simpler and 'for devs'

This playground supports visual mode switching for PlantUML class diagrams:

• For devs: enriched technical view for implementation and design decisions.
• Simpler: reduced visual complexity for communication with domain experts and other non-technical stakeholders.

This helps with situational disabilities too. You can keep discussing domain concepts in Simpler, while still evolving technical precision in For devs mode in an Agile way. Best of Both worlds!

What changes between modes?

In For devs, you can keep implementation-level detail visible, such as:

• richer attribute typing and technical type choices;
• aggregate boundary and aggregate-reference modeling choices;
• more specific relation intent (for example dependency vs association);
• optional relation legend (showDiagramLegend) for technical readers.

In Simpler, the visual is intentionally reduced to support fast, shared understanding:

• id-focused and heavy technical details are minimized;
• relation complexity is collapsed to a simpler representation;
• language stays closer to domain conversation.