Diagram Sources

Diagram Sources And Exports

The project's diagrams need to be screenshot-ready, maintainable, and bindable to interactive state. Prefer carefully authored SVGs and stable ID conventions.

Recommended Workflow

From Source To Interactive SVG

Figma / Excalidraw sketch

Export SVG

Optimize with SVGO

Add id / data-role

SVG Naming Conventions

Stable Names Make Animation And Tests More Reliable

node-*

Concept, process, and token nodes.

arrow-*

Data flow, control flow, and influence relationships.

label-*

Text labels retained in screenshots and exports.

highlight-*

Current steps, failure states, and resolved states.

Reusable Sources

Download The First SVG Source File

SVGDownload RAG Pipeline SVG

Includes stable IDs such as node-query, arrow-query-embedding for binding interactive state.

MVP Core Diagrams

12 Core Diagrams For The First Edition

DiagramAI Technical Evolution Map

The homepage path through rules, learning, large models, and agents.

DiagramAI Evolution Timeline

Connects key technical shifts and matching demos across eras.

DiagramAI Technical Lineage

Maps symbolic AI, statistical learning, neural networks, foundation models, and agents by paradigm.

DiagramLLM System Boundary Map

Shows the system relationships among models, context, retrieval, tools, memory, and evaluation.

DiagramSearch Tree Strategy Diagram

Compares expansion paths and frontiers for BFS, DFS, and A*.

DiagramExpert System Rule Diagram

Shows if-then rules, exception conditions, and conflict states.

DiagramBayesian Belief Update Diagram

Explains uncertainty updates with priors, evidence strength, and posterior bars.

DiagramDecision Boundary Comparison

Compares linear, nonlinear, and overfit boundaries.

DiagramCNN Kernel Scan

Shows the local window, convolution kernel, and feature-map response.

DiagramAttention Token Relationships

Compares direct token connections with RNN chain propagation.

DiagramRAG Pipeline Flow

Shows Query, Embedding, Vector DB, Reranker, Prompt, LLM, and Answer.

DiagramAgent Loop Action Cycle

Shows planning, tool calls, observation, revision, and the final answer.

Screenshot Ready

Every Diagram Should Stand On Its Own

Keep spacing, titles, active states, and simplification notes clearly visible. Before exporting or capturing a screenshot, choose a state that communicates one core aha moment instead of crowding the frame with multiple control panels, long explanations, and complex parameters.