Skip to main content
Glama
bobooooo

ASCIIFlow MCP Server

by bobooooo
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Remote

ASCIIFlow MCP Server

An MCP (Model Context Protocol) server that exposes ASCIIFlow's drawing primitives as tools, enabling AI assistants to generate ASCII wireframes directly from PRDs or natural language descriptions.

Installation

Requires Node.js >= 20.

Recommended: Global installation from source

# Clone the repository with submodules
git clone --recurse-submodules https://github.com/bobooooo/asciiflow-mcp.git
cd asciiflow-mcp

# Install dependencies
npm install

# Install globally
npm install -g .

If you already cloned without --recurse-submodules, initialize the submodule:

git submodule update --init --recursive

Alternative: Direct use with npx (may be slower)

npx -y github:bobooooo/asciiflow-mcp

Note: This package uses a git submodule for the ASCIIFlow client library. When cloning, use --recurse-submodules to automatically fetch the required dependencies.

Related MCP server: tl-draw-mcp

Claude Desktop Configuration

For global installation (recommended):

Add the following to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "asciiflow": {
      "command": "asciiflow-mcp"
    }
  }
}

For npx:

{
  "mcpServers": {
    "asciiflow": {
      "command": "npx",
      "args": ["-y", "github:bobooooo/asciiflow-mcp"]
    }
  }
}

Then restart Claude Desktop.

Available Tools

Tool

Parameters

Description

canvas_new

—

创建/重置一个空白画布

draw_box

x, y, w, h, label?

在画布上绘制矩形框。x/y 为左上角坐标，w/h 为宽高（字符单位，最小 3），label 可选，显示在顶边框中央

draw_line

x1, y1, x2, y2

在两点之间绘制折线（先水平后垂直）

draw_arrow

x1, y1, x2, y2

在两点之间绘制带箭头的连线，箭头指向终点

add_text

x, y, text

在指定坐标添加文字，支持 \n 换行

canvas_export

—

导出当前画布为 ASCII 文本

canvas_preview

—

预览当前画布状态（与 canvas_export 相同，用于中间检查）

canvas_batch

ops

批量执行绘图指令并返回最终结果。ops 是指令数组，每条指令包含 op 字段（canvas_new / draw_box / draw_line / draw_arrow / add_text）及对应参数

All coordinates are in character-grid units (columns / rows).

Example Usage

Single Tool Calls

Prompt Claude with:

帮我根据这个 PRD 生成登录页面的 ASCII 线框图：用户需要输入邮箱和密码，点击登录按钮后跳转到主页，底部有"忘记密码"和"注册"链接。

Claude will call the MCP tools sequentially and produce output like:

┌────────────────登录────────────────┐
│                                  │
│                                  │
│ 邮箱:                              │
│ ┌──────────────────────────────┐ │
│ │                              │ │
│ └──────────────────────────────┘ │
│                                  │
│ 密码:                              │
│ ┌──────────────────────────────┐ │
│ │                              │ │
│ └──────────────────────────────┘ │
│                                  │
│         ┌─────登 录──────┐         │
│         │              │         │
│         └──────────────┘         │
│                                  │
│  忘记密码?              注册账号   │
│                                  │
└──────────────────────────────────┘

Batch Tool Call

For better performance, use canvas_batch to execute all drawing operations in a single call:

{
  "ops": [
    { "op": "canvas_new" },
    { "op": "draw_box", "x": 0, "y": 0, "w": 36, "h": 20, "label": "登录" },
    { "op": "add_text", "x": 2, "y": 3, "text": "邮箱:" },
    { "op": "draw_box", "x": 2, "y": 4, "w": 32, "h": 3 },
    { "op": "add_text", "x": 2, "y": 8, "text": "密码:" },
    { "op": "draw_box", "x": 2, "y": 9, "w": 32, "h": 3 },
    { "op": "draw_box", "x": 10, "y": 13, "w": 16, "h": 3, "label": "登 录" },
    { "op": "add_text", "x": 3, "y": 17, "text": "忘记密码?" },
    { "op": "add_text", "x": 22, "y": 17, "text": "注册账号" }
  ]
}

Development

For Contributors

To modify the source code and rebuild:

# Clone with submodules
git clone --recurse-submodules https://github.com/bobooooo/asciiflow-mcp.git
cd asciiflow-mcp

# Install dependencies
npm install

# Build
npm run build

# Test locally
npm link

The build process uses the ASCIIFlow client library from the client-repo submodule.

Run tests:

npm test

Repository

License

MIT

Install Server
F
license - not found
A
quality
C
maintenance

How are these scores calculated?

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • jsoncanvas

    Create, validate, edit, export (markdown/svg/png/mermaid), and search JSON Canvas files.

  • Diagrams MCP

    Generate cloud architecture diagrams, flowcharts, and sequence diagrams.

  • CodePic

    AI agent draws editable hand-drawn diagrams (flowchart, ER, architecture) via MCP, not static images

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/bobooooo/asciiflow-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server