### Install Project Dependencies Source: https://github.com/mermaid-js/mermaid-cli/blob/master/building.md Run `npm install` to download and install all necessary packages listed in the project's package.json file. ```bash npm install ``` -------------------------------- ### Local Installation and Usage Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Instructions for installing Mermaid CLI locally and running it using npm or npx. ```APIDOC ## Install locally Some people are [having issues](https://github.com/mermaidjs/mermaid.cli/issues/15) installing this tool globally. Installing it locally is an alternative solution: ```sh npm install @mermaid-js/mermaid-cli ./node_modules/.bin/mmdc -h ``` ### Run with npx [`npx`](https://www.npmjs.com/package/npx) is installed by default with NPM. It downloads and runs commands at the same time. To use Mermaid CLI with npx, you need to use the `-p` flag because the package name is different than the command it installs (`mmdc`). ```sh npx -p @mermaid-js/mermaid-cli mmdc -h ``` ``` -------------------------------- ### Install Mermaid CLI with brew (Deprecated) Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md This installation method using brew is no longer supported. An old version can be installed with this command. ```sh brew install mermaid-cli ``` -------------------------------- ### Install Mermaid CLI Locally with npm Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Install the Mermaid CLI locally using npm to avoid global installation issues. Execute commands using the local binary path. ```sh npm install @mermaid-js/mermaid-cli ./node_modules/.bin/mmdc -h ``` -------------------------------- ### Install mermaid-cli Globally Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Installs the mermaid-cli package globally using npm. This makes the `mmdc` command available system-wide. ```sh npm install -g @mermaid-js/mermaid-cli ``` -------------------------------- ### Mermaid Sequence Diagram with Loops and Notes Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md An example of a sequence diagram featuring loops, timed messages, and notes spanning participants. ```mermaid sequenceDiagram %% See https://mermaidjs.github.io/sequenceDiagram.html loop everyday D-2 working days 16:00 ABCD->>DEE: [14:25] BEE (Calculation per TC until ACK becomes OK) ABCD->>FGG: BEE (Calculation per TC until ACK becomes OK) Note over ABCD,FGG: D-2 weekdays at 14:25 ABCD->>HII: Projected Authorisations to HII Note over ABCD,HII: D-2 weekdays at 16:00 end loop D-1 before deadline at 7:45 HII->>DEE: Submission Note over HII,DEE: D-1 before deadline HII->>FGG: Submission Note over HII,FGG: D-1 before deadline end ``` -------------------------------- ### Transform Markdown with Mermaid Diagrams (Example) Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Illustrates how markdown with embedded mermaid diagrams is transformed. The output references generated SVG files for each diagram. ```md ### Some markdown ```mermaid graph [....] ``` ### Some more markdown ```mermaid sequenceDiagram [....] ``` ### Mermaid with custom title/desc ```mermaid graph accTitle: My title here accDescr: My description here A-->B ``` ``` ```md ### Some markdown ![diagram](./readme-1.svg) ### Some more markdown ![diagram](./readme-2.svg) ### Mermaid with custom title/desc ![My description here](./readme-3.svg "My title here") ``` -------------------------------- ### Run Mermaid CLI with npx Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Use npx to download and run the Mermaid CLI without global installation. The -p flag is required due to the package name differing from the command name. ```sh npx -p @mermaid-js/mermaid-cli mmdc -h ``` -------------------------------- ### Create a New Branch Source: https://github.com/mermaid-js/mermaid-cli/blob/master/CONTRIBUTING.md Use this command to create a new branch for your feature or bug fix. Feature branches should start with 'feature/' and bug fixes with 'fix/'. ```bash git checkout -b my-branch-name ``` -------------------------------- ### Docker Permission Denied Error Example Source: https://github.com/mermaid-js/mermaid-cli/blob/master/docs/docker-permission-denied.md This is the error message encountered when the Docker image lacks write permissions to the mounted volume. It indicates a failure to open or write to the output file. ```bash podman run -it -v "$(pwd)":/data:z minlag/mermaid-cli -i /data/diagram.mmd node:fs:582 handleErrorFromBinding(ctx); ^ Error: EACCES: permission denied, open '/data/diagram.mmd.svg' at Object.openSync (node:fs:582:3) at Object.writeFileSync (node:fs:2143:35) at /home/mermaidcli/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:169:10 at Generator.next () at step (/home/mermaidcli/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:4:191) at /home/mermaidcli/node_modules/@mermaid-js/mermaid-cli/index.bundle.js:4:361 at processTicksAndRejections (node:internal/process/task_queues:96:5) { errno: -13, syscall: 'open', code: 'EACCES', path: '/data/diagram.mmd.svg' } ``` -------------------------------- ### Lint Fix Source: https://github.com/mermaid-js/mermaid-cli/blob/master/CONTRIBUTING.md Automatically fix linting errors in the codebase according to the style guide. ```bash npm run lint-fix ``` -------------------------------- ### Mermaid State Diagram with Escaped Quotes and Brackets Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md A state diagram example that includes escaped double quotes and square brackets in its title and description. ```mermaid stateDiagram accTitle: State diagram example with "double-quotes" accDescr: State diagram describing movement states and containing [] square brackets and \[] state Choose <> [*] --> Still Still --> [*] Still --> Moving Moving --> Choose Choose --> Still Choose --> Crash Crash --> [*] ``` -------------------------------- ### Pull Specific Mermaid CLI Docker Version Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Pull a specific version of the Mermaid CLI Docker image, for example, version 8.8.0. ```sh docker pull minlag/mermaid-cli:8.8.0 ``` -------------------------------- ### Blackjack Game Sequence Diagram Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/markdown-output.md Illustrates the dynamic interactions between objects in a Blackjack game, from starting the game to handling player turns. Useful for visualizing the flow of control and messages. ```mermaid sequenceDiagram actor User User->>+Casino: playBlackjack() Casino->>Casino: Create Random, Inquirer, Deck and Player Casino->>+Deck: shuffleCards() Deck->>Random: Use random when shuffling Deck-->>-Casino: return Casino->>+Player: drawHand() Player->>+Deck: dealCard() Deck-->>-Player: Card Player->>+Deck: dealCard() Deck-->>-Player: Card Player-->>-Casino: return Casino->>+Player: play() loop While not busted Player->>+Inquirer: ask("Hit or stand?") alt hit Inquirer-->>-Player: answer Player->>+Deck: dealCard() Deck-->>-Player: Card end end Player-->>-Casino: return Casino-->>-Joost: return ``` -------------------------------- ### Display All Available Options Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Shows all command-line options and their descriptions for the mermaid-cli. Use this to explore all available configurations. ```sh mmdc -h ``` -------------------------------- ### Configure npm Registry and Authentication Source: https://github.com/mermaid-js/mermaid-cli/blob/master/building.md Set up the .npmrc file to specify the npm registry and provide authentication token for private packages. Alternatively, use `npm login` for an interactive credential prompt. ```bash registry=https://registry.npmjs.com/ @mermaid-js:registry=https://npm.pkg.github.com //npm.pkg.github.com/:_authToken="YOUR-TOKEN" ``` -------------------------------- ### Run Mermaid CLI with Podman Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Use Podman to run the Mermaid CLI container, mounting local diagrams to /data. Includes SELinux relabeling for file access. ```sh podman run --userns keep-id --user ${UID} --rm -v /path/to/diagrams:/data:z ghcr.io/mermaid-js/mermaid-cli/mermaid-cli -i diagram.mmd ``` -------------------------------- ### Docker Usage Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Instructions for pulling and running the Mermaid CLI Docker container to generate diagrams. ```APIDOC ## Docker Usage ### Pulling the Docker Image To pull the latest image: ```sh docker pull minlag/mermaid-cli ``` Or from Github Container Registry: ```sh docker pull ghcr.io/mermaid-js/mermaid-cli/mermaid-cli ``` To pull a specific version (e.g., 8.8.0): ```sh docker pull minlag/mermaid-cli:8.8.0 ``` ### Running the Docker Container To generate an SVG from a diagram file located at `/path/to/diagrams/diagram.mmd` on your system: ```sh docker run --rm -u `id -u`:`id -g` -v /path/to/diagrams:/data minlag/mermaid-cli -i diagram.mmd ``` For Podman users, the command is similar: ```sh podman run --userns keep-id --user ${UID} --rm -v /path/to/diagrams:/data:z ghcr.io/mermaid-js/mermaid-cli/mermaid-cli -i diagram.mmd ``` **Key differences for Podman:** - `--userns keep-id`: Allows the container to maintain the current user's UID. - `:z` in volume mapping: Relabels files for SELinux compatibility. To restore the previous behavior of mounting input files in `/home/mermaidcli`, use the `--workdir` option: ```sh docker run [...] --workdir=/home/mermaidcli minlag/mermaid-cli [...] ``` ``` -------------------------------- ### Node.js API Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md How to use the Mermaid CLI programmatically via its Node.js API. ```APIDOC ## Use Node.JS API It's possible to call `mermaid-cli` via a Node.JS API. Please be aware that **the NodeJS API is not covered by semver**, as `mermaid-cli` follows `mermaid`'s versioning. ```js import { run } from "@mermaid-js/mermaid-cli"; await run( "input.mmd", "output.svg", // {optional options}, ); ``` ``` -------------------------------- ### Run Unit Tests Source: https://github.com/mermaid-js/mermaid-cli/blob/master/CONTRIBUTING.md Execute unit tests to ensure code quality and functionality. ```bash npm test ``` -------------------------------- ### Mermaid Git Graph Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md Illustrates a Git graph with commits and branches. Manual ID setting is shown. ```mermaid gitGraph %% Need to manually set id, otherwise they are auto-generated commit id: "abcdef" commit id: "123456" branch feature commit id: "789012" checkout main merge feature ``` -------------------------------- ### Run E2E Tests Source: https://github.com/mermaid-js/mermaid-cli/blob/master/CONTRIBUTING.md Run end-to-end tests for the CLI to verify its behavior in a simulated environment. ```bash npm run test:cli ``` -------------------------------- ### Run Mermaid CLI with Docker Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Execute the Mermaid CLI container to generate an SVG from a local diagram file. Input files should be placed in the /data directory within the container. ```sh docker run --rm -u `id -u`:`id -g` -v /path/to/diagrams:/data minlag/mermaid-cli -i diagram.mmd ``` -------------------------------- ### Run Mermaid CLI Script Source: https://github.com/mermaid-js/mermaid-cli/blob/master/building.md Execute the Mermaid CLI script using Node.js, specifying an input file for processing. ```bash node src/cli.js -i test-positive/state1.mmd ``` -------------------------------- ### Run Percy Visual Inspection Tests from a Forked PR Source: https://github.com/mermaid-js/mermaid-cli/blob/master/docs/reviewing.md Use this bash script to bring a PR from a fork into the main repository for Percy testing. Ensure the commit hash matches the PR's commit hash before pushing. This is necessary because Percy requires a GitHub Secret token, which is inaccessible from forks. ```bash git switch -c "" git pull "https://github.com//mermaid-cli.git" "" # Make sure the commit hash matches the commit hash of the PR you reviewed git log --max-count=1 git push git@github.com:mermaid-js/mermaid-cli.git "" ``` -------------------------------- ### Resolving Docker Permission Denied Error Source: https://github.com/mermaid-js/mermaid-cli/blob/master/docs/docker-permission-denied.md Use the Docker `-u` option with your UID to grant the container write permissions to the mounted volume. This ensures the container can create output files. ```bash docker run -u $UID -it --rm -v "$(pwd)":data minlag/mermaid-cli -i /data/diagram.mmd ``` -------------------------------- ### Puppeteer Configuration for Custom Executable Path Source: https://github.com/mermaid-js/mermaid-cli/blob/master/docs/already-installed-chromium.md Create a JSON file to specify the path to your Chrome executable. This allows Mermaid CLI to use a browser not bundled with Puppeteer. ```json { "executablePath": "C:\\path\\to\\your\\chrome.exe" } ``` -------------------------------- ### Restore Previous Docker Workdir Behavior Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Use the --workdir option to restore the previous behavior of mounting input files in /home/mermaidcli. ```sh docker run [...] --workdir=/home/mermaidcli minlag/mermaid-cli [...] ``` -------------------------------- ### Running Mermaid CLI with a Custom Puppeteer Config Source: https://github.com/mermaid-js/mermaid-cli/blob/master/docs/already-installed-chromium.md Use the `--puppeteerConfigFile` flag to point Mermaid CLI to your custom Puppeteer configuration file. This ensures the specified browser executable is used. ```bash mmdc --puppeteerConfigFile puppeteerConfigFile.json ``` -------------------------------- ### Create PNG with Dark Theme and Transparent Background Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Generates a PNG image from a mermaid definition, applying a dark theme and a transparent background. Useful for specific visual styles. ```sh mmdc -i input.mmd -o output.png -t dark -b transparent ``` -------------------------------- ### Mermaid Flowchart with Subgraphs Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md A complex flowchart demonstrating subgraphs and nested elements. ```mermaid graph BT subgraph initramfs / === ibin[bin] / --- DEV((dev)) / === ilib[lib] / --- proc((proc)) / === tmp / === usr usr === bin bin === ENV(env) tmp --- root tmp --- users((users)) root --- RDEV((dev)) root --- rproc((proc)) root --- rtmp((tmp)) root --- home((home)) end subgraph usersfs .workdirs nodeos uroot[root] nodeos --- NDEV((dev)) nodeos --- nproc((proc)) nodeos --- ntmp((tmp)) end home === .workdirs home === nodeos home === uroot users -.-> home DEV -.- NDEV proc -.- nproc DEV -.- RDEV proc -.- rproc ``` -------------------------------- ### Mermaid Flowchart with Font Awesome Icons Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md Shows how to use Font Awesome icons within flowchart nodes and links. ```mermaid graph TD B["fa:fa-car for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); B-->E(A fa:fa-camera-retro perhaps?); %% Test whether embed work correctly D-->F("
Red Circle") ``` -------------------------------- ### Mermaid Graph with Emoji Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md Demonstrates the use of emojis within node labels in a Mermaid graph. ```mermaid graph TD A-->B("hello ๐Ÿ›") ``` -------------------------------- ### Mermaid State Diagram with Trailing Spaces Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md Demonstrates that Mermaid code blocks are correctly parsed even with trailing spaces after the opening and closing fences. ```mermaid %% โ†‘โ†‘โ†‘โ†‘โ†‘ spaces should be above here. stateDiagram state Choose <> [*] --> Still Still --> [*] Still --> Moving Moving --> Choose Choose --> Still Choose --> Crash Crash --> [*] %% โ†“โ†“โ†“ should still find mermaid code even with trailing spaces after the ``` ``` -------------------------------- ### Use Mermaid CLI Node.js API Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Call the mermaid-cli functionality programmatically using its Node.js API. Note that the API is not covered by semver and follows mermaid's versioning. ```js import { run } from "@mermaid-js/mermaid-cli"; await run( "input.mmd", "output.svg", // {optional options}, ); ``` -------------------------------- ### Mermaid Flowchart with KaTeX Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md A flowchart that incorporates mathematical expressions using KaTeX syntax within node labels and link text. ```mermaid --- title: My flowchart with KaTeX in it. --- flowchart LR A["$$x^2$$"] -->|"$$\\sqrt{x+3}$$"| B("$$\\frac{1}{2}$$ ") ``` -------------------------------- ### Invoke Mermaid CLI with Puppeteer Config Source: https://github.com/mermaid-js/mermaid-cli/blob/master/docs/linux-sandbox-issue.md When using the `puppeteer-config.json` file to disable the sandbox, invoke the `mmdc` command with the `-p` flag followed by the configuration file path. ```sh mmdc -p puppeteer-config.json ... ``` -------------------------------- ### Pipe Mermaid Definition from Stdin Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Sends a mermaid diagram definition to the CLI via standard input using a heredoc. This is useful for scripting and dynamic generation. ```sh cat << EOF | mmdc --input - graph TD A[Client] --> B[Load Balancer] EOF ``` -------------------------------- ### Disable Chrome Sandbox via Puppeteer Config Source: https://github.com/mermaid-js/mermaid-cli/blob/master/docs/linux-sandbox-issue.md Create a `puppeteer-config.json` file to specify arguments for disabling the sandbox. This is a workaround for running Mermaid CLI as root or on systems with kernel limitations. ```json { "args": ["--no-sandbox"] } ``` -------------------------------- ### Mermaid Graph with Japanese Characters Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md Shows how to include Japanese characters in link text. ```mermaid graph LR A -->|ใ“ใ‚“ใซใกใฏ| B ``` -------------------------------- ### Pull Mermaid CLI Docker Image from GHCR Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Pull the Mermaid CLI Docker image from the GitHub Container Registry. ```sh docker pull ghcr.io/mermaid-js/mermaid-cli/mermaid-cli ``` -------------------------------- ### Mermaid Graph with Line Breaks in Node Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md Demonstrates using HTML line break tags (`
` and `
`) within a node label. ```mermaid graph TD subgraph sub node(Line 1
Line 2
Line 3) end ``` -------------------------------- ### Blackjack Game Class Diagram Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/markdown-output.md Defines the classes, their relationships, and methods for a Blackjack game simulation. Useful for understanding the static structure of the game. ```mermaid classDiagram Card "*" --> "1" Suit Card "*" --> "1" Rank Player "1" --> "*" Card Deck "1" --> "1" Random Deck "1" --> "52" Card Player "1" --> "1" Inquirer Player "1" --> "1" Deck Casino "1" --> "*" Player Casino "1" --> "1" Deck class Casino { + void main(String[] args) + void playBlackjack() } class Suit { <> } class Rank { <> + int value() } class Inquirer { String ask(String question, List choices) BigDecimal askNumber(String question, BigDecimal min, BigDecimal max); } class Random { int nextInt(int bound) } class Player { - double bet - List hand; + void makeBet() + void play() + void drawHand() } class Deck { - Cards[] cards + Card dealCard(); + void shuffle(); } class Card { +Suit suit() +Rank rank() +int value() +boolean isAce() +string toString() } ``` -------------------------------- ### Transform Markdown with Mermaid Diagrams Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Converts a markdown file containing mermaid diagrams into a new markdown file. The CLI automatically finds diagrams, generates SVGs, and updates the markdown to reference these SVGs. ```sh mmdc -i readme.template.md -o readme.md ``` -------------------------------- ### Mermaid Flowchart with Elk Layout and Hand-Drawn Look Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/mermaid.md Configures a flowchart to use the Elk layout engine and a hand-drawn visual style, with a seed for consistent rendering. ```mermaid --- config: look: handDrawn layout: elk handDrawnSeed: 1 # this is so visual regression tests are constant --- flowchart LR A --> B --> C & D ``` -------------------------------- ### Python Test Function Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/no-charts.md This is a simple Python function. It is included to show that the mermaid-cli does not crash when encountering non-Mermaid code blocks. ```python def test(): pass ``` -------------------------------- ### Pull Mermaid CLI Docker Image Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Use this command to pull the latest Mermaid CLI Docker image from Docker Hub. ```sh docker pull minlag/mermaid-cli ``` -------------------------------- ### Convert Mermaid to SVG Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Converts a mermaid definition file (`.mmd`) to an SVG file. Use this for basic diagram generation. ```sh mmdc -i input.mmd -o output.svg ``` -------------------------------- ### Render ER Diagram Source: https://github.com/mermaid-js/mermaid-cli/blob/master/test-positive/erDiagram.markdown Use this syntax to define an entity relationship diagram with a title. Ensure the diagram is enclosed in a mermaid code block. ```mermaid --- title: Order example --- erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses ``` -------------------------------- ### Animate SVG with Custom CSS Source: https://github.com/mermaid-js/mermaid-cli/blob/master/README.md Inlines custom CSS into an SVG output for animations. Ensure the CSS file is compatible and consider potential browser security restrictions. ```sh mmdc --input test-positive/flowchart1.mmd --cssFile test-positive/flowchart1.css -o docs/animated-flowchart.svg ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.