# koboyohq/koboyo architecture

> Architecture diagram of the GitHub repository koboyohq/koboyo, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/koboyohq/koboyo
- Repository: https://github.com/koboyohq/koboyo

## Overview

Koboyo is a browser-based infinite canvas for creating diagrams, documents, and presentations. The documented workflow is to start drawing or import content, edit and arrange it on the canvas, then present, export, or save it. The README also describes diagram-as-code, AI generation and editing, and specialized visual tools. No runtime source or implementation directories are present in the supplied tree, so repository paths and internal call relationships cannot be established; the graph reflects documented capabilities only.

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_canvas["Canvas editing"]
  node_canvas["Infinite canvas"]
  node_editing["Arrange and edit"]
  node_connectors["Connectors and groups"]
end

subgraph group_creation["Content creation"]
  node_diagram_code["Diagram-as-code"]
  node_imports["Diagram imports"]
  node_visuals["Diagrams and charts"]
  node_wireframes["Wireframes and mockups"]
  node_rich_content["Docs and rich content"]
  node_ai_generation["AI generation"]
  node_ai_assistant["AI assistant"]
end

subgraph group_output["Presentation and output"]
  node_present["Present mode"]
  node_export["PNG SVG PDF export"]
end

subgraph group_state["Files and modes"]
  node_save["Browser and KBY save"]
  node_pages["Multi-page docs"]
  node_view_modes["Zen and read-only"]
end

node_user(("User"))

node_user -->|"creates on"| node_canvas
node_user -->|"imports from"| node_imports
node_imports -->|"loads into"| node_canvas
node_user -->|"authors with"| node_diagram_code
node_diagram_code -->|"compiles to"| node_visuals
node_user -->|"prompts"| node_ai_generation
node_ai_generation -->|"generates diagrams"| node_visuals
node_ai_generation -->|"generates slide decks"| node_present
node_user -->|"requests edits"| node_ai_assistant
node_ai_assistant -->|"edits"| node_canvas
node_ai_assistant -->|"makes images"| node_visuals
node_user -->|"edits"| node_editing
node_editing -->|"arranges content"| node_canvas
node_user -->|"uses"| node_connectors
node_user -->|"creates"| node_wireframes
node_user -->|"creates"| node_rich_content
node_user -->|"presents"| node_present
node_user -->|"exports"| node_export
node_user -->|"saves"| node_save
node_user -->|"organizes in"| node_pages
node_user -->|"switches to"| node_view_modes

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_canvas,node_editing,node_connectors,node_user toneBlue
class node_diagram_code,node_imports,node_visuals,node_wireframes,node_rich_content,node_ai_generation,node_ai_assistant toneAmber
class node_present,node_export toneMint
class node_save,node_pages,node_view_modes toneRose
```

## Components

### Canvas editing

- **Infinite canvas**
- **Arrange and edit**
- **Connectors and groups**

### Content creation

- **Diagram-as-code**
- **Diagram imports**
- **Diagrams and charts**
- **Wireframes and mockups**
- **Docs and rich content**
- **AI generation**
- **AI assistant**

### Presentation and output

- **Present mode**
- **PNG SVG PDF export**

### Files and modes

- **Browser and KBY save**
- **Multi-page docs**
- **Zen and read-only**

### Other components

- **User**

## Connections

- User → Infinite canvas: creates on
- User → Diagram imports: imports from
- Diagram imports → Infinite canvas: loads into
- User → Diagram-as-code: authors with
- Diagram-as-code → Diagrams and charts: compiles to
- User → AI generation: prompts
- AI generation → Diagrams and charts: generates diagrams
- AI generation → Present mode: generates slide decks
- User → AI assistant: requests edits
- AI assistant → Infinite canvas: edits
- AI assistant → Diagrams and charts: makes images
- User → Arrange and edit: edits
- Arrange and edit → Infinite canvas: arranges content
- User → Connectors and groups: uses
- User → Wireframes and mockups: creates
- User → Docs and rich content: creates
- User → Present mode: presents
- User → PNG SVG PDF export: exports
- User → Browser and KBY save: saves
- User → Multi-page docs: organizes in
- User → Zen and read-only: switches to