Azure DevOps Mermaid 🎨
Professional Mermaid diagram renderer for Azure DevOps with full GitHub Flavored Markdown support
Azure DevOps Mermaid is a powerful extension that brings beautiful, interactive Mermaid diagrams to your Azure DevOps repositories. Seamlessly integrated with Azure Repos, it automatically renders Mermaid code blocks in your Markdown files, transforming plain text into stunning visualizations.
Note: This project is a complete rebrand and modernization of the original azure-devops-markdown-mermaid extension, featuring GitHub Flavored Markdown support, updated dependencies, professional table styling, comprehensive testing, and modern build tooling.
✨ Features
🎯 Core Capabilities
- Automatic Rendering: Instantly visualize Mermaid diagrams directly in Azure Repos
- GitHub Flavored Markdown: Full GFM support including tables, task lists, and strikethrough
- Multiple Diagram Types: Support for flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, entity relationships, user journeys, and more
- Modern Technology: Built with the latest Mermaid v11.12.0 and Marked.js for optimal performance
- Zero Configuration: Works out of the box - just install and start creating diagrams
📊 Supported Diagram Types
- Flowcharts - Visualize processes and workflows
- Sequence Diagrams - Document interactions between components
- Gantt Charts - Plan and track project timelines
- Class Diagrams - Model system architectures
- State Diagrams - Represent state machines
- Entity Relationship Diagrams - Design database schemas
- User Journey Maps - Map user experiences
- Git Graphs - Visualize branch strategies
- Pie Charts - Display data distributions
- Mindmaps - Brainstorm and organize ideas
- And many more!
🎨 Enhanced Markdown Rendering
- Professional table formatting with borders and styling
- Syntax highlighting for code blocks
- Proper handling of lists, headings, and inline formatting
- Responsive design that adapts to Azure DevOps themes
🚀 Quick Start
Installation
- Visit the Azure DevOps Marketplace
- Search for "Azure DevOps Mermaid" by jramos
- Click Get it free and select your organization
- Follow the installation prompts
Usage
Simply add Mermaid diagrams to your Markdown files using fenced code blocks:
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Check docs]
D --> A
```
The diagram will automatically render when you view the Markdown file in Azure Repos.
📖 Examples
Sequence Diagram
```mermaid
sequenceDiagram
participant User
participant API
participant Database
User->>API: Request data
API->>Database: Query
Database-->>API: Results
API-->>User: Response
```
Gantt Chart
```mermaid
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
Development :after a1, 60d
section Phase 2
Testing :2024-03-15, 20d
Deployment :2024-04-05, 10d
```
Table Support
| Feature | Status | Notes |
|---------|--------|-------|
| Diagrams | ✅ | Fully supported |
| Tables | ✅ | GFM compatible |
| Styling | ✅ | Professional look |
🔧 Technical Details
Built with modern, industry-leading technologies:
- Mermaid.js 11.12.0 - The latest version with all diagram types
- Marked.js 16.3.0 - Fast, robust GitHub Flavored Markdown parsing
- Azure DevOps SDK 4.1.0 - Official integration for seamless experience
- Webpack 5 - Optimized builds for peak performance
Browser Compatibility
- Chrome/Edge (recommended)
- Firefox
- Safari
🔄 What's New in Version 2.0
This major release brings significant improvements:
✨ New Features
- Upgraded to Mermaid v11 with enhanced diagram types and features
- Replaced CommonMark with Marked.js for complete GFM support
- Professional table styling with borders, hover effects, and alternating rows
- Improved rendering performance and reliability
🔧 Technical Improvements
- Modern Webpack 5 build system
- All dependencies updated to latest stable versions
- Comprehensive unit testing with Jest
- Enhanced error handling and edge cases
- Better Azure DevOps theme compatibility
📝 Developer Experience
- Complete documentation rewrite
- Convenient Makefile with 20+ commands
- Improved project structure
- Active maintenance and support
📦 Requirements
- Azure DevOps account (cloud or server)
- Modern browser (Chrome, Edge, Firefox, Safari)
- No additional configuration needed!
🤝 Contributing & Support
Open Source
This extension is open source and available under the MIT License. Contributions are welcome!
Troubleshooting
Diagrams not rendering?
- Ensure your code block uses the
mermaid language identifier
- Check that your Mermaid syntax is valid
- Try refreshing the page
Tables not formatting correctly?
- Verify your table syntax follows GFM standards
- Ensure proper spacing around pipes (
|)
📝 License
MIT License - Free to use, modify, and distribute.
🙏 Acknowledgments
Built with ❤️ by Javier Ramos
This project is a fork of rafaelprd/azure-devops-markdown-mermaid, which is no longer maintained. Special thanks to the original author for the concept and initial implementation.
Additional thanks to:
Additional thanks to:
- Mermaid.js - The incredible diagramming library
- Marked - Robust Markdown parsing
- Microsoft - Azure DevOps Extension SDK
- The open-source community for inspiration and support
🚀 Get Started Today!
Transform your Markdown files into visual masterpieces!
Install Now from Azure DevOps Marketplace →
🔗 Resources
⭐ Show Your Support
If you find this extension helpful, please consider:
- ⭐ Starring the repository
- 📢 Sharing with your team
- 💬 Leaving a review on the marketplace
- 🐛 Reporting bugs or suggesting features
