# Mermaid from data

Turn structured node and edge rows into Mermaid flowchart, classDiagram or erDiagram source with labels, shapes and relationship styles.

## Run it

- **CLI:** `gizza tool mermaid-from-data "Start -> Build : implement
Build -> Ship : deploy"`
- **Web:** https://gizza.ai/tools/mermaid-from-data/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/mermaid-from-data/tool.json

## Inputs

- `edges` — Edges or paths _(field)_
- `nodes` — Node declarations (optional) _(field)_
- `diagram` — Diagram type _(field)_
- `direction` — Direction _(field)_
- `row_mode` — Delimited row mode _(field)_
- `delimiter` — Delimiter _(field)_
- `node_shape` — Default flowchart node shape _(field)_
- `edge_style` — Default edge style _(field)_
- `title` — Diagram title _(field)_
- `fence` — Wrap in a Markdown mermaid fence _(field)_

## Output

- Mermaid source (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `edges` — Edges or paths
- `nodes` — Node declarations (optional)
- `diagram` — Diagram type
- `direction` — Direction
- `row_mode` — Delimited row mode
- `delimiter` — Delimiter
- `node_shape` — Default flowchart node shape
- `edge_style` — Default edge style
- `title` — Diagram title
- `fence` — Wrap in a Markdown mermaid fence

Example: `https://gizza.ai/tools/mermaid-from-data/?edges=Start%20-%3E%20Build%20%3A%20implement%0ABuild%20-%3E%20Ship%20%3A%20deploy&nodes=api%20%7C%20API%20service%20%7C%20round%20%7C%20Backend%0Adb%20%7C%20Postgres%20%7C%20cylinder%20%7C%20Backend&diagram=flowchart&direction=TD&row_mode=pair&delimiter=auto&node_shape=rect&edge_style=arrow&title=Release%20pipeline&fence=true`

---

## About this tool

Mermaid from data turns the rows you already have into paste-ready Mermaid diagram source. Use arrow lines like `Start -> Build : work`, delimited edge rows like `from,to,label,style`, or chain rows like `Draft,Review,Ship`. Optional node rows add friendly labels, flowchart shapes, subgraph groups, class members or ER attributes.

The output is plain Mermaid text, so you can paste it into Markdown, docs sites, issue trackers or any renderer that supports Mermaid. The generator does not render images; it focuses on producing readable, deterministic source that can be reviewed and version-controlled.

Example: a short left-to-right flowchart from arrow lines:

```bash
gizza tool mermaid-from-data edges="Start -> Build : implement
Build -> Ship : deploy" direction=LR title="Release pipeline"
```

For tabular input, use `row_mode=pair` when each row is `from,to,label,style`, or `row_mode=chain` when each row is a path and adjacent columns should be linked.

## Limits and edge cases

- Up to 500 nodes, 1000 edges and 2 MB each for edges and node declarations.
- Flowcharts support node shapes, subgraph groups and arrow/open/dotted/thick/bidirectional edge styles.
- Class diagrams map relationship styles such as inheritance, composition, aggregation and dependency to Mermaid operators.
- ER diagrams map common cardinality names such as one-to-many and one-to-one-or-more.
- Node identifiers are sanitized for Mermaid while labels preserve the original text.

## FAQ

<details>
<summary>Can I paste CSV directly?</summary>

Yes. Set delimiter to comma or leave it on auto for simple CSV-style rows. A header row such as `from,to,label,style` is skipped automatically, and quoted fields keep commas inside the label.

</details>

<details>
<summary>What is the difference between pair mode and chain mode?</summary>

Pair mode treats each row as one edge: source, target, optional label and optional style. Chain mode treats each row as a path, so `Draft,Review,Publish` becomes `Draft --> Review` and `Review --> Publish`.

</details>

<details>
<summary>Does this validate Mermaid rendering?</summary>

It validates the structured data and emits Mermaid source, but it does not run a browser renderer or catch every Mermaid syntax rule. Paste the output into your Mermaid renderer for final visual layout checks.

</details>

<details>
<summary>How do I add class members or ER attributes?</summary>

Use the node declarations field. For a class diagram, write rows such as `Animal | +String name; +eat()`. For an ER diagram, write rows such as `CUSTOMER | string name PK; string email`.

</details>

## Related tools

- [Markdown Section Extractor](https://gizza.ai/tools/markdown-section-extractor/): Extract one section from a Markdown document by heading — keep or drop subsections, exact or substring match, ATX and setext. Free, in your browser.
- [Convert Markdown ↔ Jira Wiki Markup](https://gizza.ai/tools/markdown-to-jira/): Convert Markdown to Jira wiki markup and back locally. Handles headings, lists, tables, code blocks, links, images, quotes, and common panels.
- [Export Markdown Notes to HTML](https://gizza.ai/tools/notes-to-html-export/): Combine Markdown notes into one standalone HTML page with embedded CSS, sanitized output and a linked table of contents.
- [Docker Compose to Mermaid diagram](https://gizza.ai/tools/compose-to-diagram/): Convert docker-compose.yml into Mermaid flowchart text showing services, dependencies, ports, volumes, and networks.
- [Add a Vignette to an Image](https://gizza.ai/tools/image-vignette/): Add a dark, light or colored vignette around the edges of a photo, right in your browser — adjustable strength, center and output format. Nothing is uploaded, free.