These local diagrams can either be stored in .mmd or .mermaid files, or they can be stored within ```mermaid code blocks within .md GFM markdown files.

Firstly, go to https://www.mermaidchart.com/app/user/settings and generate an API key, which you can then setup by running:

npx @mermaidchart/cli login

`link` an existing Mermaid diagram to MermaidChart.com

You can link a local Mermaid diagram to MermaidChart using:

npx @mermaidchart/cli link ./path/to/my/mermaid-digram.mmd

This will add an id: xxxx-xxxxx-xxxxx field to your diagram's YAML frontmatter, which points to the diagram on MermaidChart.com:

```mermaid
---
title: My diagram
id: https://www.mermaidchart.com/d/xxxx-xxxxx-xxxxx # this field is created by @mermaidchart/cli
---
flowchart
  x[My Diagram]
```

`push` local changes to MermaidChart.com

Once you've made some local changes, you can push your changes to MermaidChart.com

$ npx @mermaidchart/cli push ./path/to/my/mermaid-digram.mmd
✅ - ./path/to/my/mermaid-digram.mmd was pushed

`pull` changes from MermaidChart.com

You can use pull to pull down changes from MermaidChart.com.

$ npx @mermaidchart/cli pull ./path/to/my/mermaid-digram.mmd
✅ - ./path/to/my/mermaid-digram.mmd was updated

Or use the --check flag to throw an error if your local file would have been updated:

$ npx @mermaidchart/cli pull ./path/to/my/mermaid-digram.mmd
❌ - ./path/to/my/mermaid-digram.mmd would be updated

Contributing

For local development and testing, you can pnpm dev to run the CLI, pnpm run lint to run linting, and pnpm test to run unit tests.

Keywords

mermaid mermaidchart cli