How to Use the Command 'mmdc' for Diagram Generation (with Examples)

Mermaid is a powerful tool that allows users to generate diagrams using a domain-specific language. Mermaid can be utilized directly in the browser or from a command-line interface (CLI) using mmdc, a CLI tool designed for this purpose. The mmdc tool is particularly useful for automating the generation of diagrams as part of a build process or script. By taking a mermaid definition file as input, it converts it into a visual representation such as an SVG, PNG, or PDF file as output. This flexibility and automation capability make mmdc an essential tool for developers, technical writers, and anyone who needs to create diagrams programmatically.

Use case 1: Convert a File to the Specified Format

Code:

mmdc --input input.mmd --output output.svg

Motivation:

In the technical documentation and software development field, clear and concise diagrams are crucial for communicating complex information. An automated process to convert diagram definitions into visual formats saves time and reduces error likelihood. Using mmdc, diagrams can be seamlessly integrated into workflows, ensuring they are always up to date with the source code or documentation.

Explanation:

• --input input.mmd: This flag specifies the path to the Mermaid definition file. The file contains instructions written in Mermaid’s domain-specific language, which outlines how the diagram should be constructed.
• --output output.svg: This argument designates the output file path and format. The format (SVG in this case) is automatically determined by the file extension provided. SVG files are chosen for their scalability and compatibility with web applications.

Example Output:

The command takes the content of ‘input.mmd’, which may define a flowchart or a diagram, and generates ‘output.svg’, a file that visually represents this information as a scalable vector graphic.

Use case 2: Specify the Theme of the Chart

Code:

mmdc --input input.mmd --output output.svg --theme dark

Motivation:

Themes are used to apply a consistent style to the diagrams, which is especially important for maintaining a coherent appearance across multiple diagrams in a project or publication. Different themes can also be more compatible with specific settings, such as presentations or websites, where a dark theme might be preferred for low-light environments or to restate a brand’s color scheme.

Explanation:

• --input input.mmd: As before, this flag specifies the input file containing the diagram definition.
• --output output.svg: Again, this designates the output file path and format.
• --theme dark: This argument specifies the theme that should be applied to the diagram. The available themes include ‘forest’, ‘dark’, ’neutral’, and ‘default’. Here, ‘dark’ applies a color scheme that’s conducive to darker backgrounds, enhancing visibility and aesthetic appeal.

Example Output:

The generated SVG will showcase the diagram with a dark theme applied, featuring darker backgrounds and contrasting colors for text or nodes, making it ideal for presentations conducted in dimly lit environments.

Use case 3: Specify the Background Color of the Chart

Code:

mmdc --input input.mmd --output output.svg --backgroundColor transparent

Motivation:

Specifying a custom background color for a diagram can be essential when integrating the diagram into a document or application with specific branding requirements. Alternatively, a transparent background is often desired for embedding diagrams in presentations or web pages where the background needs to blend seamlessly with its surroundings.

Explanation:

• --input input.mmd: This specifies the path to the input file, as previously described.
• --output output.svg: This specifies where the output file will be saved and its format.
• --backgroundColor transparent: This argument allows the user to define the background color of the diagram. Background colors can be specified using standard color names or hexadecimal color codes. Here, ’transparent’ is used, meaning the background will have no color and will allow whatever is behind it in the document or application to show through.

Example Output:

Executing this command will produce an SVG diagram with a transparent background, making it versatile for inclusion on websites or documents with varying background designs.

Conclusion:

Using the mmdc tool in the command line maximizes efficiency and customization when creating diagrams. By automating the conversion of diagram files and allowing for specific styling through themes and background colors, mmdc provides a robust solution for consistent and professional diagram generation across a variety of applications. Whether you’re preparing a presentation, building web content, or generating technical documentation, mmdc offers the flexibility and control needed to produce compelling visual content.