Sketch Stack

SketchStack ⚡

AI-Powered Architecture Diagram Generator

Turn natural language descriptions into professional draw.io or hand-drawn Excalidraw diagrams in seconds.

Powered by Ollama (Llama 3.2), draw.io MCP Server, and Excalidraw.

______________________________________________________________________

🎯 它做什么

1. 描述 你的系统用简单的英语。
2. AI提取物 组件、关系、数据流和架构风格。
3. 图表已生成 以您喜欢的格式：

- draw.io：带有云图标的专业标准XML。 - 白板绘图：手绘风格，非常适合绘图和原型制作。

1. 交互模式：将Excalidraw图表展开到全屏进行拖放编辑。
2. 精炼 迭代地——“添加缓存”、“使其无服务器化”等。

排除MCP演示

______________________________________________________________________

🎨 Excalidraw支持

SketchStack现在支持 白板绘图 对于素描风格的美学。

• 自动布局：用途 dagre 用于智能分层定位。
• 交互式：切换全屏以拖动、移动和组织节点。
• 手绘的：非常适合高级系统设计和白板会议。

______________________________________________________________________

📐 建筑

graph LR
    A[User Description] --> B[Ollama LLM]
    B --> C[Zod Validator]
    C --> D[Architecture Agent]
    D --> E{Format Selector}
    E -->|draw.io| F[XML Builder]
    E -->|Excalidraw| G[Excalidraw Builder]
    F --> H[draw.io MCP]
    G --> I[Excalidraw App]

______________________________________________________________________

🚀 快速开始

先决条件

1. Node.js 18+ — 下载
2. 奥拉玛 — 安装

设置

# 1. Clone this repo
git clone https://github.com/harishkotra/SketchStack SketchStack
cd SketchStack

# 2. Install dependencies
npm install

# 3. Pull an Ollama model
ollama pull llama3.2
# or: ollama pull qwen2.5-coder

# 4. Start Ollama (if not already running)
ollama serve

# 5. Start SketchStack
npm run dev

# 6. Open http://localhost:3000

______________________________________________________________________

📖 用例

• DevRel演示：快速生成博客文章或文档的参考架构。
• 系统设计访谈：练习设计系统并立即将其可视化。
• 原型设计：在提交代码之前，集思广益，快速迭代架构想法。
• 文档：通过描述现有遗留系统来生成起点图。
• 教学：向学生展示不同组件（负载均衡器、缓存、队列）如何组合在一起。

______________________________________________________________________

🌐 公共API

SketchStack公开了一个REST API，您可以在自己的应用程序中使用它。默认情况下，服务器已启用CORS。

端点： POST /api/generate

请求：

{
  "description": "A microservice e-commerce backend with API gateway",
  "cloudProvider": "aws",       // optional: aws, gcp, azure, neutral
  "architectureStyle": "auto"   // optional: microservices, serverless, etc.
}

答复：

{
  "sessionId": "session_123",
  "xml": "...",
  "drawioUrl": "https://app.diagrams.net/...",
  "viewerUrl": "https://viewer.diagrams.net/..."
}

部署

码头工人:

docker build -t sketchstack .
docker run -p 3000:3000 -e OLLAMA_URL=http://host.docker.internal:11434 sketchstack

Vercel/铁路:

• 这个项目需要一个持久服务器（Node.js）和对Ollama的访问。
• 对于无服务器部署，您需要一个公共Ollama端点（例如，通过ngrok或托管LLM API）。
• 集 FORCE_COLOR=1 为了更好的日志可读性。

______________________________________________________________________

🧱 项目结构