UIFlowchartCreator 是一个用于创建 UI 流程图的 MCP（模型上下文协议）服务器。该工具可帮助开发人员和设计人员可视化用户界面及其交互。
该项目的源代码可在 GitHub 上找到： https://github.com/umshere/uiflowchartcreator
Related MCP server: Draw.io MCP Server
根据输入规范生成UI流程图
与 MCP 兼容系统集成
易于使用的流程图创建 API
npm install uiflowchartcreator要在兼容 MCP 的系统中利用 UIFlowchartCreator，请将其添加到您的 MCP 配置中：
{
"mcpServers": {
"uiflowchartcreator": {
"command": "node",
"args": ["path/to/uiflowchartcreator/build/index.js"],
"env": {}
}
}
}详细的使用说明和API文档请参考src/index.ts中的源码和注释。
欢迎贡献代码！欢迎提交 Pull 请求。
该项目已获得 ISC 许可。
Generate a UI flow diagram by analyzing React/Angular repositories. This tool scans the codebase to identify components, their relationships, and the overall UI structure.
| Name | Required | Description | Default |
|---|---|---|---|
| fileExtensions | No | List of file extensions to analyze (e.g., ['js', 'jsx', 'ts', 'tsx'] for React, ['ts', 'html'] for Angular) | |
| isLocal | Yes | Whether to analyze a local repository (true) or GitHub repository (false) | |
| owner | No | GitHub repository owner (required if isLocal is false) | |
| repo | No | GitHub repository name (required if isLocal is false) | |
| repoPath | Yes | Path to local repository or empty string for GitHub repos |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions scanning codebases to identify components and relationships, but fails to describe critical behaviors like output format (e.g., diagram type, file format), performance implications (e.g., time to analyze large repos), error handling, or authentication needs for GitHub access. This leaves significant gaps for an agent to use the tool effectively.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded, stating the core purpose in the first sentence. Both sentences are relevant, with the second elaborating on the scanning process. There's no unnecessary information, though it could be slightly more structured (e.g., separating purpose from behavior).
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of analyzing codebases and generating diagrams, with no annotations and no output schema, the description is incomplete. It doesn't explain what the output looks like (e.g., a visual diagram, JSON data), how errors are handled, or any limitations (e.g., supported React/Angular versions). This makes it inadequate for an agent to fully understand the tool's behavior and results.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with all parameters well-documented in the schema itself. The description adds no additional parameter semantics beyond what's in the schema (e.g., it doesn't explain how 'fileExtensions' affect analysis or clarify 'repoPath' usage). With high schema coverage, the baseline score of 3 is appropriate, as the description doesn't compensate but also doesn't detract.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Generate a UI flow diagram by analyzing React/Angular repositories.' It specifies the verb ('generate'), resource ('UI flow diagram'), and scope ('React/Angular repositories'), making it easy to understand what the tool does. However, without sibling tools, it cannot demonstrate differentiation from alternatives, preventing a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage by mentioning 'React/Angular repositories,' suggesting it's for analyzing codebases in those frameworks. However, it lacks explicit guidance on when to use this tool versus other analysis tools, prerequisites, or exclusions. No sibling tools are provided, so no alternative comparisons are possible.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0generate_ui_flowScored across 1 tool
With only one tool, there is no possibility of ambiguity or overlap between tools. The tool's purpose is clearly defined as generating UI flow diagrams from React/Angular repositories, making it distinct by default.
The single tool follows a clear verb_noun pattern (generate_ui_flow), and with no other tools to compare, consistency is inherently perfect. There are no deviations or mixed conventions to evaluate.
One tool is too few for a server named 'UIFlowchartCreator', which implies a broader scope of UI flowchart creation and management. A single tool feels thin and limits functionality, such as missing operations for editing, exporting, or analyzing existing diagrams.
The tool surface is severely incomplete for the domain of UI flowchart creation. While generate_ui_flow covers initial diagram generation, there are significant gaps: no tools for updating, deleting, exporting, or viewing diagrams, and no lifecycle coverage beyond creation.
Create and manage Mermaid.js flowcharts and diagrams with AI agents via MCP.
Generate org charts, MCD/ERD data models, and C4 architecture diagrams — pilot OrgGen AI via MCP.
Render, verify, describe, and safely edit Mermaid diagrams through MCP.
Generate, inspect, and manage Flowstep UI designs directly from your AI assistant.
