# Graphly AI - Full Knowledge Base & Agent Reference > Graphly AI (https://graphly.click) is an infinite visual whiteboard and diagramming application built for AI engineers, system architects, and product builders. It merges AI-native architecture diagramming, UML/ERD modeling, and visual planning into a unified, high-performance, offline-first canvas. --- ## 1. Overview & Value Proposition Graphly AI solves the fragmentation of modern engineering diagramming. Traditional whiteboard tools either lack structured engineering primitives or lock teams behind expensive per-seat paywalls with arbitrary board limits. ### Core Tenets: 1. **Unconstrained & Free by Default**: Unlimited local diagrams saved directly in browser LocalStorage. No paywalls, no forced account creation to begin drawing. 2. **AI-Native Text-to-Board Generation**: Natural-language prompts translate instantly into cleanly routed, structured multi-node canvas diagrams. 3. **Rich Semantic Node Types**: Pre-configured nodes for AI harnesses (Agents, RAG, MCP tools, embeddings), Microservices, UML classes, Database schemas, and Planning boards. 4. **Offline-First with Optional Cloud Sync**: Complete offline functionality with optional Google OAuth for cross-device cloud synchronization and live multiplayer collaboration. 5. **Precision Routing & Export**: Obstacle-avoiding orthogonal connectors, custom waypoint dragging, and high-resolution PNG/SVG vector export with interactive crop bounds. 6. **30+ Production-Grade Templates**: Pre-built, customizable blueprints across AI architectures, cloud microservices, UML diagrams, and product planning boards. --- ## 2. Comprehensive Node Catalog Graphly AI features 7 specialized React Flow node types designed for engineering precision: ### A. `componentNode` (AI & Software Infrastructure) - **Purpose**: Represents software services, AI models, data pipelines, and third-party APIs. - **Categories**: - *AI Core*: LLM Agent, Reasoning Core, Evaluator, Embedder, Guardrail. - *AI Harness*: RAG Pipeline, Vector Index, Memory Store, Agent Tool, Prompt Cache. - *Backend Services*: REST API, GraphQL Gateway, gRPC Service, Microservice Worker. - *Data & Storage*: SQL Database, NoSQL Document Store, Object Storage (S3/R2), In-Memory Cache (Redis). - *Messaging*: Event Bus (Kafka), Message Queue (RabbitMQ), WebSocket Pub/Sub. ### B. `environmentNode` (Cloud Boundaries & Infrastructures) - **Purpose**: Visual boundary representing cloud providers, clusters, or runtime zones. - **Variants**: AWS, Google Cloud (GCP), Microsoft Azure, Cloudflare, Kubernetes Cluster, Virtual Private Cloud (VPC), On-Premise Datacenter. ### C. `containerNode` (Subsystems & Component Groupings) - **Purpose**: Lightweight grouping box for enclosing related services, microservice clusters, or modular subsystems. ### D. `shapeNode` (Flowcharts & Primitives) - **Purpose**: Standard visual primitives and ideation elements. - **Variants**: Rectangle, Rounded Box, Circle, Diamond (Decision), Cylinder (Database), Cloud, Sticky Notes (Yellow, Blue, Green, Pink, Violet). ### E. `classNode` (UML Class Diagrams) - **Purpose**: Object-oriented architecture modeling with full UML stereotype support. - **Features**: Stereotype badge (`<>`, `<>`, `<>`), editable fields/properties with visibility markers (`+` public, `-` private, `#` protected, `~` package), and typed method signatures. ### F. `tableNode` (Database Schemas & ERD) - **Purpose**: Relational database modeling and entity-relationship diagrams. - **Features**: Table headers with icon badges, structured row editor for column names, data types (VARCHAR, INT, UUID, TIMESTAMP, JSONB), Primary Key (`PK`) toggles, and Foreign Key (`FK`) connectors. ### G. `laneNode` (Swimlanes & Kanban Tiers) - **Purpose**: Process flows, Kanban columns (Backlog, In Progress, Done), and multi-tier organizational mapping. --- ## 3. Diagram Families & Complete Template Directory Browse the full interactive library at: https://graphly.click/templates ### A. AI Systems & Agent Architectures 1. **[Multi-Agent Orchestration](https://graphly.click/templates/multi-agent-orchestration)**: Orchestrator delegating tasks to specialized sub-agents with shared memory. 2. **[RAG Pipeline Architecture](https://graphly.click/templates/rag-pipeline-architecture)**: Complete RAG architecture covering ingestion, chunking, embedding, vector retrieval, and generation. 3. **[Agent Tool Call Loop](https://graphly.click/templates/agent-tool-call-loop-sequence)**: Sequence diagram illustrating user-harness-agent-LLM-sandbox tool-calling execution loop. 4. **[Harness Engineering Architecture](https://graphly.click/templates/harness-engineering-architecture)**: Runtime orchestrating an Agent against an LLM with safety, guardrails, and approval flow. 5. **[MCP Server Tool Catalog](https://graphly.click/templates/mcp-server-tool-catalog)**: MCP server exposing a catalog of filesystem, shell, browser, and database tools to AI clients. ### B. System Architecture & Cloud Systems 6. **[Event-Driven Message Queue](https://graphly.click/templates/event-driven-message-queue-architecture)**: Producers publishing to a topic broker, fanning out to independent consumers with dead letter queue. 7. **[Microservices API Gateway](https://graphly.click/templates/microservices-api-gateway-architecture)**: API Gateway routing to independently-owned microservices with async event queue. 8. **[Three-Tier Web Application](https://graphly.click/templates/three-tier-web-app-architecture)**: Load-balanced app tier in front of a cached, replicated database. 9. **[Caching & CDN Strategy](https://graphly.click/templates/caching-cdn-strategy-architecture)**: Layered caching strategy from edge CDN through a Redis cache to the database. 10. **[Raw Data Warehouse Pipeline](https://graphly.click/templates/raw-data-warehouse-pipeline)**: Data flow from raw source data through cleaning and warehousing to an analytics dashboard. ### C. UML & Software Engineering 11. **[SaaS Database Schema (ERD)](https://graphly.click/templates/saas-diagram-app-database-schema)**: ERD database schema for a SaaS diagram application with relational PK/FK constraints. 12. **[Agent Controller Class Diagram](https://graphly.click/templates/agent-controller-class-diagram)**: UML class diagram for an abstract agent, controller implementation, and tool provider. 13. **[Diagram Review State Machine](https://graphly.click/templates/diagram-review-state-machine)**: UML state machine for drafting, reviewing, approving, and revising diagrams. 14. **[New User Onboarding Activity](https://graphly.click/templates/new-user-onboarding-activity)**: UML activity flow for account setup, verification, tutorial choice, and first board creation. 15. **[Diagram Sharing Use Case](https://graphly.click/templates/diagram-sharing-use-case)**: UML use-case diagram for owners and collaborators sharing, editing, exporting, and authenticating. 16. **[Import/Export Component Diagram](https://graphly.click/templates/import-export-component-diagram)**: UML component view of file parsing, template loading, thumbnail rendering, and export. 17. **[Graphly Deployment Topology](https://graphly.click/templates/graphly-deployment-topology)**: UML deployment topology linking browser SPA, local storage, Cloudflare Workers, and CDN assets. ### D. Product Strategy & Visual Planning 18. **[Sprint Kanban Board](https://graphly.click/templates/sprint-kanban-board)**: Sprint kanban board tracking tasks across Backlog, In Progress, Review, and Done. 19. **[Product Roadmap](https://graphly.click/templates/2026-product-roadmap)**: Quarterly roadmap board laying out major initiatives on a swimlane timeline. 20. **[Impact vs Effort Prioritization Matrix](https://graphly.click/templates/impact-effort-prioritization-matrix)**: 2x2 matrix placing initiatives in Quick Wins, Major Projects, Fill-Ins, and Thankless Tasks. 21. **[Backlog Prioritization Board](https://graphly.click/templates/backlog-prioritization-board)**: Combined backlog Kanban and impact-effort prioritization board. 22. **[Weekly Active Teams OKR](https://graphly.click/templates/weekly-active-teams-okr)**: OKR card for doubling weekly active teams with measurable key results. 23. **[Feature Prioritization RICE](https://graphly.click/templates/feature-prioritization-rice)**: Side-by-side RICE scoring cards (Reach, Impact, Confidence, Effort). 24. **[Retrospective Notes](https://graphly.click/templates/retrospective-notes)**: Plain sticky-note retrospective with wins and improvement opportunities. ### E. Design & User Research 25. **[Customer Journey Map](https://graphly.click/templates/customer-journey-map)**: Full Customer Journey Map (CJM) with Persona profile, Parking Lot, and horizontal swimlane tracks. 26. **[Empathy Map Canvas](https://graphly.click/templates/empathy-map-canvas)**: Dave Gray standard Empathy Map Canvas with 4 core quadrants (Says, Thinks, Does, Feels). 27. **[User Persona Canvas](https://graphly.click/templates/user-persona-canvas)**: Persona Canvas with profile card, Parking Lot dispenser, and Goal/Frustration drop zones. 28. **[Value Proposition Canvas](https://graphly.click/templates/value-proposition-canvas)**: Strategyzer Value Proposition Canvas mapping Value Map against Customer Profile. 29. **[Affinity Diagram](https://graphly.click/templates/affinity-diagram)**: Qualitative research synthesis board grouping raw interview notes into thematic insight clusters. 30. **[Feedback Capture Grid](https://graphly.click/templates/feedback-grid)**: Stanford d.school Feedback Capture Grid dividing feedback into I Like, I Wish, Questions, What If. --- ## 4. AI Board Generation Capabilities Graphly AI allows users to generate diagrams via natural language prompts from the dashboard (`/app`): - **Deterministic Structural Prompting**: Employs structured schemas to layout nodes and connect edges logically. - **Automatic Layout Balancing**: Employs specialized vertical and horizontal layout chains avoiding node collisions. - **Adaptive Node Sizing**: Dynamically sizes nodes according to textual content, table columns, or UML attributes. --- ## 5. Storage, Sync & Real-time Collaboration - **Local Storage Engine**: Diagrams are stored in browser storage (`localStorage`) using serialized JSON records. - **Cloud Synchronization**: Optional sign-in via Google OAuth synchronizes diagrams securely with remote Cloudflare D1 storage. - **Real-Time Multiplayer Collaboration**: Shareable diagram links allow multiple users to collaborate concurrently with live multi-cursor presence powered by Yjs CRDTs and Cloudflare Durable Objects. - **Folder Organization**: Organize diagrams into custom folders, search across titles, and manage sharing permissions from a central dashboard. --- ## 6. Export Pipeline & Interoperability - **PNG Export**: Crisp bitmap rendering with configurable pixel ratio (1x, 2x, 3x) for crisp documentation. - **SVG Vector Export**: Fully scalable vector graphics retaining sharp typography and styled connector paths. - **Interactive Crop Selector**: Precision camera-fit and screen-space crop handles to capture exactly what matters. - **`.graphly` Backup Files**: 100% portable JSON files containing node coordinates, edge connections, colors, and metadata for seamless import/export. --- ## 7. Frequently Asked Questions (FAQ) ### What is Graphly AI and what can I build with it? Graphly AI is an all-in-one collaborative whiteboard designed for AI engineers and software architects. You can design AI agent architectures, cloud systems, UML/ERD diagrams, and product planning boards. ### Is Graphly AI free to use? Yes, Graphly AI is 100% free with unlimited local diagrams. There are no paywalls or single-board limits, and you can start drawing immediately without signing up. Detailed pricing is available at https://graphly.click/pricing.md. ### How does AI text-to-board generation work? Simply describe the system or architecture you want in natural language. Graphly AI generates and connects all nodes, shapes, and routing edges automatically onto your canvas. ### Can I use Graphly AI offline without an account? Yes. Graphly AI is built with an offline-first architecture. All your diagrams are stored locally in your browser with zero tracking and full privacy. ### What export formats are supported? You can export diagrams to high-resolution PNG images, vector SVG files with interactive crop selection, or export portable `.graphly` JSON files for complete backup and restore. ### What types of diagrams and templates are supported? Graphly AI supports AI agent architectures, microservice infrastructures, UML Class and ERD diagrams, State Machines, Use Case diagrams, and Kanban roadmap planning boards. See https://graphly.click/templates for all 30 templates. --- ## 8. Official Links - Web App: https://graphly.click - Open Canvas: https://graphly.click/app - Templates Gallery: https://graphly.click/templates - Pricing Specification: https://graphly.click/pricing.md - Privacy Policy: https://graphly.click/privacy - Terms of Service: https://graphly.click/terms - AI Quick Index: https://graphly.click/llms.txt - Full Knowledge Base: https://graphly.click/llms-full.txt