nifdi — collaborative diagrams for you and your coding agent

Agent-led diagrams with fine-grained control. nifdi gives coding agents tools to create and edit architecture, flow, system and network diagrams. It also bundles a visual web editor for precise, hands-on refinement. Ask your agent to open the editor—in its built-in browser (where supported) and choose the best interaction for each change - type/speak or point with your mouse.

Your agent and the editor work on the same structured .nifdi.svg file, so you can move between natural-language requests and WYSIWYG editing without flattening the diagram into a generated image. This plugin combines the @nifdi/mcp diagram tools and bundled editor with skills for layout, labels, styling, connectors and a render-and-review workflow.

What you can do

• Build a diagram from a description or an existing image.

• Make wholesale changes through follow-up requests, then fine-tune visually in the editor.

• Use provider icon libraries for architecture diagrams.

• Keep the result as a structured file that both the editor and your coding agent can edit again.

Related MCP server: Azure Diagram MCP Server

Install

The plugin installs both the nifdi MCP server and its diagram-authoring skills.

Codex

Add the nifdi marketplace, then install the plugin:

codex plugin marketplace add nifdi-app/nifdi-plugin
codex plugin add nifdi@nifdi-plugin

Start a new Codex task after installation. You can also open /plugins in Codex CLI or use the Plugins browser in the ChatGPT desktop app.

Claude Code

claude plugin marketplace add nifdi-app/nifdi-plugin
claude plugin install nifdi@nifdi-plugin

Start a new Claude Code session after installation.

Other MCP and Agent Skills clients

If your client supports Agent Skills, install or copy the complete skills/nifdi/ directory, including its references/ directory. Then configure the nifdi server as a local MCP server using this stdio command:

npx -y @nifdi/mcp@latest

A common client configuration shape is:

{
  "mcpServers": {
    "nifdi-diagram": {
      "command": "npx",
      "args": ["-y", "@nifdi/mcp@latest"],
      "env": {
        "NIFDI_ROOT": "/absolute/path/to/your/diagrams"
      }
    }
  }
}

MCP standardises the server protocol and stdio transport, but clients use different configuration files and installation interfaces. Translate the command, arguments and environment variables into your client's MCP configuration.

Clients that support MCP but not Agent Skills can still use the server; they simply will not receive the additional authoring guidance bundled with this repository.

Try it

Ask your agent:

• “Create a three-tier web architecture diagram with a load balancer, API service and database.”

• “Recreate this architecture screenshot as an editable nifdi diagram.”

• “Add a cache beside the database and route read traffic through it.”

• “Open the diagram editor so I can fine-tune the layout.”

When the client supplies its current project root, nifdi writes .nifdi.svg files there. Otherwise, set NIFDI_ROOT to the directory where diagrams should be stored.

Contributing

Provider conventions, worked recipes and skills for more diagram genres are especially welcome. See CONTRIBUTING.md for the contribution guide and local checks.

Licence

Licensed under Apache-2.0.