UIFlowchartCreator

by umshere

Recommended

7 stars

11 downloads

Not rated

GitHub

About

Enables users to create UI flowcharts by generating visualizations of user interfaces and interactions through an easy-to-use API within MCP-compatible systems.

Details

Author: umshere
Repository: umshere/uiflowchartcreator
GitHub stars: 7
Downloads: 11
Categories: Developer Tools, Design, Knowledge Base

Setting up with Highlight

Follow these steps to add this server as a custom Highlight plugin:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below
Plugin Name UIFlowchartCreator

Command (node, npx, python, etc.) node
Arguments
- Argument 1 path/to/uiflowchartcreator/build/index.js
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

From the repository

To use UIFlowchartCreator in your MCP-compatible system, add it to your MCP configuration:

{
  "mcpServers": {
    "uiflowchartcreator": {
      "command": "node",
      "args": ["path/to/uiflowchartcreator/build/index.js"],
      "env": {}
    }
  }
}

For detailed usage instructions and API documentation, please refer to the source code and comments in src/index.ts.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "uiflowchartcreator": {
            "env": {},
            "args": [
                "path/to/uiflowchartcreator/build/index.js"
            ],
            "command": "node"
        }
    }
}

Linux

{
    "env": [],
    "args": [
        "path/to/uiflowchartcreator/build/index.js"
    ],
    "command": "node"
}

Macos

{
    "env": [],
    "args": [
        "path/to/uiflowchartcreator/build/index.js"
    ],
    "command": "node"
}

Windows

{
    "env": [],
    "args": [
        "path/to/uiflowchartcreator/build/index.js"
    ],
    "command": "node"
}

UIFlowchartCreator is an MCP (Model Context Protocol) server for creating UI flowcharts. This tool helps developers and designers visualize user interfaces and their interactions.

The source code for this project is available on GitHub:https://github.com/umshere/uiflowchartcreator

- Generate UI flowcharts based on input specifications
- Integrate with MCP-compatible systems
- Easy-to-use API for flowchart creation

To use UIFlowchartCreator in your MCP-compatible system, add it to your MCP configuration:

{ "mcpServers": { "uiflowchartcreator": { "command": "node", "args": ["path/to/uiflowchartcreator/build/index.js"], "env": {} } } }

For detailed usage instructions and API documentation, please refer to the source code and comments insrc/index.ts.

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the ISC License.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

The industry-standard doctrine for safe, observable, and steerable AI agent UX — browse 10 principles, curated examples, and application guides via MCP.

Access comprehensive documentation for Ant Design components, including examples, API references, and best practices.

An MCP server for accessing and managing design system documentation from a GitHub repository.

Since AI can write code, it can also maintain structured architecture diagrams for your team. DiagramGuru is the MCP tool that lets AI agents create, update, and evolve your C4 architecture — automatically.

Create crafted UI components inspired by the best 21st.dev design engineers.

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.

Local stdio MCP server that lets AI coding agents read and maintain structured architecture, rules, and decisions directly from your repository.

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

UIFlowchartCreator

About

Details

Jump to

Setting up with Highlight

Setting up with Cursor

JSON

JSON

JSON

Setting up with Claude Desktop

JSON

JSON

JSON

Setting up with Windsurf

JSON

JSON

JSON

Setting up with Cline

JSON

JSON

JSON

Setting up with Goose

JSON

JSON

JSON

From the repository

Claude Desktop / Cursor

Linux

Macos

Windows

Install

About

Details

Jump to

Setting up with Highlight

From the repository

Claude Desktop / Cursor

Linux

Macos

Windows

Install

More like this

Aws Kb Retrieval Server

Memory

Sentry

Github

Git

GitLab