mcp-mermiad

# MCP Community Announcement Post ## Where to Post ### 1. MCP GitHub Discussions **URL:** https://github.com/modelcontextprotocol/specification/discussions **Category:** Show and Tell --- ## Post Title ``` 🎨 New MCP Server: Mermaid Diagram Generation with 22+ Diagram Types ``` --- ## Post Content ```markdown Hi MCP Community! 👋 I'm excited to share a new MCP server I've built for AI-powered diagram generation! ## 🎯 What It Does The **Mermaid MCP Server** enables AI assistants like GitHub Copilot and Claude to generate professional Mermaid diagrams from natural language descriptions. Instead of manually writing Mermaid syntax, you can simply describe what you want: **Example with Copilot:** ``` User: Create a microservices architecture diagram for an e-commerce platform Copilot: [Calls MCP Server] [Returns professional diagram] ``` ## ✨ Key Features - 🎨 **22+ Diagram Types**: Flowcharts, sequence diagrams, class diagrams, ER diagrams, architecture diagrams, state machines, Gantt charts, mindmaps, and more - 📚 **50+ Pre-built Templates**: Production-ready patterns for common scenarios - 🤖 **Natural Language Input**: Describe your diagram, get professional results - ⚡ **Multiple Export Formats**: SVG, PNG, PDF - 🔧 **Flexible Integration**: Works with GitHub Copilot, Claude Desktop, Cursor IDE, CLI, or custom applications - 📊 **Advanced Features**: Custom themes, interactive diagrams, layout engines - ✅ **Production-Ready**: XML-validated SVG outputs, battle-tested ## 🚀 Quick Start ### Installation **NPM (recommended):** \`\`\`bash npm install -g @narasimhaponnada/mermaid-mcp-server \`\`\` **From Source:** \`\`\`bash git clone https://github.com/Narasimhaponnada/mermaid-mcp.git cd mermaid-mcp/mermaid-mcp-server npm install && npm run build \`\`\` ### Configuration **For GitHub Copilot (VS Code):** \`\`\`json { "github.copilot.mcp.servers": { "mermaid": { "command": "mermaid-mcp" } } } \`\`\` **For Claude Desktop:** \`\`\`json { "mcpServers": { "mermaid": { "command": "mermaid-mcp" } } } \`\`\` ## 📊 Example Use Cases 1. **Documentation**: Auto-generate architecture diagrams for your docs 2. **Code Reviews**: Include visual flowcharts in pull requests 3. **Onboarding**: Create visual guides for new team members 4. **Technical Proposals**: Explain system changes with diagrams 5. **Incident Response**: Document incidents with timelines 6. **Client Presentations**: Visualize technical concepts ## 🔧 Technical Details - **Built with:** TypeScript, Puppeteer, MCP SDK - **Rendering:** Browser-based with Puppeteer for consistent, XML-compliant SVG output - **Architecture:** Stateless MCP server with stdio transport - **Documentation:** 3,000+ lines of setup and user guides ## 📚 Resources - **Repository:** https://github.com/Narasimhaponnada/mermaid-mcp - **NPM Package:** https://www.npmjs.com/package/@narasimhaponnada/mermaid-mcp-server - **Setup Guide:** [Setup.md](https://github.com/Narasimhaponnada/mermaid-mcp/blob/main/Setup.md) - **User Guide:** [UserGuide.md](https://github.com/Narasimhaponnada/mermaid-mcp/blob/main/UserGuide.md) - **Live Examples:** [Sample SVGs](https://github.com/Narasimhaponnada/mermaid-mcp/tree/main/mermaid-mcp-server/examples/architectures) ## 🎬 Demo Here are some example diagrams generated by the server: 1. **Microservices Architecture** (27KB SVG) 2. **CI/CD Pipeline** (28KB SVG) 3. **Cloud Infrastructure** (31KB SVG) 4. **Data Pipeline** (24KB SVG) 5. **Serverless Architecture** (31KB SVG) All diagrams are available in the repository's examples folder. ## 🤝 Feedback Welcome! I'd love to hear your thoughts: - What diagram types would you find most useful? - What integrations should I prioritize? - Any bugs or feature requests? - How would you use this in your workflow? ## 🙏 Acknowledgments Thanks to: - The MCP team for creating this amazing protocol - Mermaid.js for the fantastic diagramming library - GitHub Copilot team for enabling AI-powered development ## 📝 License MIT License - Free to use, modify, and distribute --- **Try it out and let me know what you think!** 🚀 GitHub: https://github.com/Narasimhaponnada/mermaid-mcp NPM: `npm install -g @narasimhaponnada/mermaid-mcp-server` --- *P.S. If you find this useful, a ⭐ on GitHub would be much appreciated!* ``` --- ## Alternative: Shorter Version For platforms with character limits: ```markdown 🎨 Built an MCP server for AI-powered Mermaid diagram generation! ✨ Features: • 22+ diagram types (flowchart, sequence, architecture, etc.) • Works with Copilot & Claude • 50+ templates • Natural language → professional diagrams • SVG/PNG/PDF export 📦 Install: npm install -g @narasimhaponnada/mermaid-mcp-server 🔗 GitHub: https://github.com/Narasimhaponnada/mermaid-mcp Feedback welcome! 🚀 ``` --- ## Additional Communities to Post In ### 2. Reddit - r/MachineLearning **Title:** [P] Built an MCP Server for AI-Powered Diagram Generation **Content:** (Use the full version above, adapted for Reddit formatting) ### 3. Reddit - r/opensource **Title:** I created an open-source MCP server for generating diagrams with AI **Content:** (Emphasize open-source nature, MIT license, contribution opportunities) ### 4. Hacker News **Title:** Show HN: MCP Server for AI-Powered Diagram Generation **URL:** https://github.com/Narasimhaponnada/mermaid-mcp **Comment:** Add 2-3 paragraphs explaining motivation, technical choices, and results ### 5. Dev.to Article **Title:** Building an MCP Server for AI-Powered Diagram Generation **Content:** Expanded version with: - Problem statement - Solution architecture - Technical implementation details - Code examples - Results and lessons learned ### 6. Twitter/X **Thread:** ``` 🎨 Just launched Mermaid MCP Server! An MCP server that lets AI assistants generate professional diagrams from natural language 🧵 Thread on what it does and how to use it... 1/6 ``` ``` ✨ Features: • 22+ diagram types • 50+ templates • Works with Copilot & Claude • Natural language input • SVG/PNG/PDF export • Production-ready 2/6 ``` ``` 💡 Use cases: • Auto-generate docs • Visual code reviews • Team onboarding • Technical proposals • Incident timelines Perfect for developers who want better documentation faster 3/6 ``` ``` 🚀 Getting started is easy: npm install -g @narasimhaponnada/mermaid-mcp-server Then configure in VS Code or Claude Desktop Full guide: [link] 4/6 ``` ``` 🎬 Example: You: "Create a microservices architecture diagram" AI: [Generates professional diagram with API gateway, services, databases, caching] No more manual Mermaid syntax! 5/6 ``` ``` ⭐ Try it out: GitHub: https://github.com/Narasimhaponnada/mermaid-mcp Feedback welcome! #MCP #AI #DevTools #OpenSource #Mermaid 6/6 ``` --- ## Posting Schedule **Day 1:** - ✅ GitHub MCP Discussions - ✅ Update GitHub Topics - ✅ Reddit r/opensource **Day 2:** - ✅ Twitter thread - ✅ LinkedIn post - ✅ Hacker News **Day 3-4:** - ✅ Dev.to article - ✅ Reddit r/MachineLearning - ✅ Medium (if you have account) **Week 2:** - Follow up on comments - Answer questions - Gather feedback - Plan improvements --- **Ready to announce? Pick the platform and post!** 🚀