A useful diagram may start as a few lines of Mermaid. A useful dataset may arrive as an Arrow table from a database query. Semiotic's adaptersgive those inputs a route into the same chart application, so you can keep the work already done and add the interaction your readers need.
Why the handoff matters
Moving between tools is a chance to lose meaning. A decision can become an unlabeled junction; a large integer can lose precision; a source chart's extra layer can disappear. A useful adapter makes its output inspectable and tells the caller what it could not preserve. The author still needs to check the result and explain it to the reader.
Read a flowchart as a process
Follow the example from Ingest to the Valid? decision. The Yes branch transforms a record and sends it toward storage and reporting. The No branch sends it to Quarantine. Rectangles are steps, the diamond is a decision, and arrows show direction.
Follow the arrow labels Yes and No to compare the two routes.
Follow the arrows from top to bottom. The diamond separates valid records from records sent to quarantine; the cylinder marks storage. Exact nodes and links are available in the chart's data table.
unstable_fromMermaid reads a subset of Mermaid flowchart syntax and returns nodes, edges, and suggested layers. The mermaidDagLayout recipe uses those layers to draw this example. Mermaid flowcharts can contain cycles; the adapter warns when it must use a best-effort layering. It also warns about flattened subgraphs and other unsupported syntax. Read warnings before treating the translation as complete.
Mermaid has its ownaccessible titles and descriptions. The reason to translate is to use the graph inside a Semiotic application: coordinated interaction, theme settings, and authored accessible text. A richer navigation tree is a separate composition, not something this adapter creates automatically.
Read columns as chart rows
In the second example, compare the lengths of four revenue bars. East is highest at 145; West is lowest at 71. The sample table implements the small Arrow interface the adapter reads, so the demonstration runs without a database connection.
East has the highest revenue; West has the lowest.
Synthetic revenue values read from an Arrow-shaped sample table. Bar length shows revenue; each bar and table row names its region.
fromArrow materializes ordinary row objects. You can select just the columns you need with fields. Safe integer values become JavaScript numbers; integers outside the safe range remain bigints and produce a warning. Resolve those values deliberately before using them on a numeric scale. This conversion copies data; it is not a zero-copy columnar renderer.
When to reach for an adapter
Use these adapters when the source already expresses the relationships or measurements you need and the supported subset preserves them. Keep the original renderer for a diagram whose unsupported grouping or layout is essential. For an Arrow result too large to inspect usefully, aggregate or filter it in the query before making chart rows.
Wiring it up
import { fromArrow } from "semiotic/data" import { unstable_fromMermaid } from "semiotic/experimental" const rows = fromArrow(table, { fields: ["region", "revenue"] }) const graph = unstable_fromMermaid(flowchartText) // Inspect graph.warnings, then pass nodes and edges to NetworkCustomChart. // Add a title, description, and the reading tools your audience needs.Other places this helps
The same handoff appears in a pipeline explorer, a notebook moving into an application, and a report assembled from a browser database. In each case, preserve the source's meaning before adding another way to explore it.