Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@UIFlowchartCreator create a flowchart for a login screen with email and password fields"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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
Related MCP server: Draw.io MCP Server
Generate UI flowcharts based on input specifications
Integrate with MCP-compatible systems
Easy-to-use API for flowchart creation
npm install uiflowchartcreatorTo 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.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the ISC License.
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. Dates show when Glama detected each change.
v1.0.0generate_ui_flowWith 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.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
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.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/umshere/uiflowchartcreator'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
