✦ Slide Deck

Welcome to Tooda

A lightweight, browser-based tool for creating and maintaining architecture & design diagrams — no install required.

Tooda helps software teams visualize complex systems using industry-standard notation. Everything runs in the browser using static files, so there is nothing to deploy or configure: just open a URL and start exploring.

Use the navigation buttons below (or the ← → arrow keys) to move through the slides.

🏗️ C4 Model

C4 Architecture Diagrams

Explore real-world system designs at four levels of detail using Mermaid-powered C4 notation.

1️⃣
Level 1 – Context
Shows the system and how users and external systems interact with it.
2️⃣
Level 2 – Container
Zooms in to show the applications, services, and data stores that form the system.
3️⃣
Level 3 – Component
Reveals the major structural components inside a single container.
4️⃣
Level 4 – Code
Shows the classes and interfaces that implement a component.

Built-in examples: Online Banking, E-Commerce, Ride-Sharing, and Tooda itself.

✏️ Freehand

Freehand Diagrams

Sketch architecture ideas freely with Excalidraw's hand-drawn aesthetic — full edit, view, and export support built in.

Excalidraw diagrams give your architecture visuals a natural, approachable look without sacrificing the precision of the C4 model. Each of the four C4 levels is available in freehand form for the Healthcare Platform example.

🖊️
Edit Mode
Modify diagrams interactively directly in the browser canvas.
👁️
View Mode
Present diagrams in a clean read-only view without UI clutter.
💾
Export JSON
Download any diagram as a portable Excalidraw JSON file.
📐
Responsive Canvas
Canvas adapts to any screen size automatically via ResizeObserver.
🔌 API

API Explorer

Every diagram is also available as a JSON endpoint — explore and test them interactively via a built-in Swagger UI.

Tooda exposes a fully documented REST-style API so that teams can programmatically consume diagram data. The API is described with an OpenAPI 3.0 specification and browsable without any extra tooling.

📄
C4 Endpoints
Fetch full C4 diagram definitions for any of the four built-in examples.
🖼️
Excalidraw Endpoints
Retrieve Excalidraw element arrays for each C4 level of the Healthcare Platform.
📑
OpenAPI Spec
Machine-readable OpenAPI 3.0 schema served at /Tooda/api/openapi.json.
⚡
Swagger UI
Interactive API browser with live request/response testing, no extra tools needed.
🔮 Platform

Platform & Technology

Tooda is built on a modern, zero-server-required stack that deploys as pure static files.

🚀
Astro v5
Static-site generator that compiles pages to HTML, CSS, and minimal JS.
⚛️
React 18
Interactive components like the Excalidraw viewer and 3D visualizer.
🎨
Tailwind CSS v3
Utility-first CSS for a consistent, responsive, themeable interface.
🔷
TypeScript (strict)
Full type safety across all source files for reliability and maintainability.
🌐
GitHub Pages
Automatic deployment via GitHub Actions on every push to main.
🧪
Playwright Tests
Comprehensive end-to-end test suite covering every page and feature.
✅ Get Started

Start Exploring

Jump straight into any of Tooda's features — everything runs in your browser, nothing to install.

🏗️
C4 Diagrams
Explore interactive C4 architecture diagrams.
🏦 Open Banking →
✏️
Freehand Diagrams
Sketch with Excalidraw's hand-drawn style.
🏥 Open Healthcare →
🔌
API Explorer
Test and browse diagram API endpoints.
⚡ Open API Explorer →
📋
All Features
See everything Tooda has to offer.
📋 View Features →