Mermaid MMD Tools for VS Code

Enhance Your Development Workflow with Mermaid.js Diagrams

ViewSequence.mmd

GenSequence.mmd

sequenceDiagram
  participant User
  participant VSCode
  participant Extension
  participant DiagramViewer
  participant VSCodeAPI

  User->>VSCode: Open .mmd file
  VSCode->>Extension: Activate extension
  Extension->>DiagramViewer: Call renderMMDFile()
  DiagramViewer->>VSCodeAPI: Show diagram in editor
  VSCodeAPI-->>User: Display rendered diagram

Keep Design and Code Aligned

Diagram Viewer

Designing your software domain with diagrams helps maintain clarity and consistency. By integrating Mermaid.js diagrams into Visual Studio Code, you ensure that your design stays aligned with your code throughout the development process.

Render Mermaid.js Diagrams.: Seamlessly view and edit `.mmd` files directly in Visual Studio Code.
Stay In Sync.: Keep your design diagrams close to your codebase, ensuring that your implementation matches your original design.

Boost Developer Productivity

Class Diagram Generator

Understanding complex codebases can be challenging. With the class diagram generator, you can quickly visualize the structure and relationships within your TypeScript code, making it easier to comprehend and navigate.

Visualize Your Code.: Automatically generate class diagrams from TypeScript files in any folder.
Focus on What Matters.: Generated diagrams are saved in the selected folder, allowing for focused visualization of specific parts of your codebase.

Why use this extension?

This Visual Studio Code Extension aims to enhance your development workflow. Whether you're working with complex class structures or simply need to visualize your ideas, this extension makes it easy to create and view diagrams with just a few clicks.

Install Now

Get Started

Install the extension from the Visual Studio Code marketplace and start viewing your Mermaid.js diagrams and generating class diagrams effortlessly!

Install Now View on GitHub