Charts right inside the message: Chart.js, D3, and Mermaid instead of Markdown

Over the past couple of years, agents have learned to write code, call APIs, spin up sandboxed environments, and draft contracts. And yet, when you ask one to "show me a chart," it still hands you a Markdown list.

Why Markdown became the default — and why that needs to change

Markdown turned out to be a convenient compromise for LLM output. It's a universal format, any client can parse it, and the text is editable by hand. For a text answer, that's plenty.

For data visualization, it isn't. When a user asks for "monthly revenue trends," a Markdown table or an ASCII bar is the equivalent of a designer describing a mockup in words: "a blue square in the top-right corner, two yellow rectangles below it." Technically the data is all there, but there's zero perception.

The alternative — "send a link to the BI tool / export a CSV / generate a file" — works, but it breaks the conversation: chat → link → new tab → dashboard → come back → next question. Context is lost at every step.

In 2026, answering a chart request with a Markdown table is like printing your charts on a dot-matrix printer.

What the user sees

At Samreshuuu, we solved this narrowly: the agent draws real charts and diagrams right inside the message. Not a file, not a link, not an attachment. The render lives in the same message where the agent is answering you in text.

• Ask "monthly revenue trends" — get a bar chart.
• Ask "what does our sales process look like" — get a Mermaid flowchart.
• Say "put together a mini KPI dashboard" — get cards with SVG charts.

The chart and the explanatory text come as a single block — your eyes scan the explanation and immediately see what was drawn.

What's under the hood

Under the hood: Chart.js, D3, Mermaid, and inline SVG in a sandboxed iframe.

The sandboxed iframe is the key detail. Any visualization code the agent generates runs in an isolated environment: no access to the parent DOM, no outbound network calls, no cookies or localStorage from the main page. For the user, that means an agent's chart can't accidentally (or intentionally) break the rest of the interface.

Inside the iframe, the agent picks the right tool for the job itself:

• Chart.js — bar, line, pie, scatter, doughnut. Standard statistical charts, where the priority is speed and tidiness.
• D3 — custom visualizations, non-standard axes, curves, hierarchies. For when something doesn't fit a standard grid.
• Mermaid — flowcharts, sequence diagrams, Gantt charts, ER diagrams. Everything about processes and relationships.
• Inline SVG — for one-off diagrams that are simpler to draw by hand.

Choosing the tool is the agent's responsibility. It looks at the request ("show the distribution" vs. "describe the process" vs. "draw the relationships in the database") and reaches for the render that fits most naturally.

The flow itself looks like this:

Between the request and the picture, there's a single pass. No intermediate artifacts, no "let me generate a file, I'll send the link separately."

Follow-ups happen in the same place

The point isn't that a chart got drawn. The point is that you can keep working with it in the same conversation.

"Make it a pie instead of a bar," "add Q4," "recolor it to our brand palette" — the old widget is replaced by a new one in the same spot. The conversation doesn't fracture into "here's a link → wait → open it → come back." The message updates, and the chat history preserves the context: which data, which chart, which edits the user asked for.

This changes how the product feels. The chart stops being an "artifact" that gets generated once and then lives somewhere in your files. It becomes a living part of the conversation, just as mutable as the text itself.

Where this changes the workflow ritual

The most noticeable effect is in regular operational meetings. The sales standup, the weekly warehouse report, an incident review, a sprint retrospective. Anywhere you used to have to prep an Excel or PowerPoint export in advance, a single conversation with the agent is now enough.

The analyst asks a series of follow-up questions live: "show me the funnel," "slice it by region," "drop the cancellations," "now compare it to last month." Each refinement is a new chart in place of the old one. Presentations stop being a document you assemble the day before the meeting. They become a live investigation in the moment.

The same goes for one-off tasks. An incident postmortem: "draw a timeline from the logs," "show the RPS at the moment of the outage," "make a Mermaid diagram of the call chain" — three charts in one chat, with no switching between Grafana, the docs, and Excel.

What to try

The simplest way to feel the difference is to ask the agent to visualize something you'd normally drag into Excel by hand.

• "Show monthly revenue trends for the last six months"
• "Draw our sales process from lead to close"
• "Put together a mini dashboard of the sales team's key KPIs"
• "Compare conversion across channels as a bar chart"

If the request is specific — there's data, a metric, a time period — the agent will pick a suitable chart type and draw it right in the chat. If data is missing, it'll ask exactly what's lacking.

And the main thing: after the first attempt, you can iterate. Change the chart type, add a slice, recolor it, combine two charts into a dashboard. All in one conversation, with no exports and no switching.