--- title: "Storage" description: "The readers on editor.storage.diagrams: charts, diagrams and tables in the document, export, Data Sources and the view." canonical_url: "https://tiptap.dev/docs/diagrams/api-reference/storage" --- # Storage The readers on editor.storage.diagrams: charts, diagrams and tables in the document, export, Data Sources and the view. ```ts const charts = editor.storage.diagrams.listCharts() const text = editor.storage.diagrams.read({ pos: charts[0].pos, format: 'chart-syntax' }) ``` ## Charts, diagrams and tables in the document | Reader | Returns | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `listCharts()` | Every chart, see [Chart fields](https://tiptap.dev/docs/diagrams/api-reference/storage.md#chart-fields) | | `listDiagrams()` | Every diagram, see [Diagram fields](https://tiptap.dev/docs/diagrams/api-reference/storage.md#diagram-fields) | | `listTables()` | Every table a chart or a diagram can follow, see [Table fields](https://tiptap.dev/docs/diagrams/api-reference/storage.md#table-fields). Empty without `chart.linkTables` | | `getOpenInput()` | The Quick Input or input table the cursor is in, see [The open input](https://tiptap.dev/docs/diagrams/api-reference/storage.md#the-open-input). `null` outside one | ### Chart fields | Field | Value | | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `pos` | The chart's position | | `data` | The Chart Data | | `spec` | The Chart Spec | | `renderer` | The Renderer the chart names | | `source` | Its Data Source | | `delimiter` | Its delimiter | | `previewUrl` | Its preview URL | | `layout` | Whether it stands alone, follows a table, or is hidden below it ([`setChartLayout`](https://tiptap.dev/docs/diagrams/data/tables.md#setchartlayout)) | | `tableId` | The table it follows, or `null` | | `tableRead` | How it reads that table, `{ header?, range? }` with only what differs from the default, or `null` | ### Diagram fields | Field | Value | | ------------- | ------------------------------------------------------------------- | | `pos` | The diagram's position | | `format` | Its format | | `source` | Its source | | `title` | Its title | | `description` | Its description | | `view` | Its view | | `options` | Its options | | `kind` | The kind of Mermaid diagram, or `null` | | `drawable` | Whether a Diagram Renderer for its format can draw the source | | `link` | The table it is drawn from, `{ tableId, columns }`, or `null` | | `lanes` | The lanes of a diagram drawn from a table, in the order they appear | ### Table fields | Field | Value | | ------------- | ------------------------------------------------------------------------------------------------------------------------------- | | `pos` | The table's position | | `tableId` | Its id, once a chart follows it, or `null` | | `header` | Its first row | | `headerCells` | Whether that row is header cells. Without them, the row names the columns only when it holds no number outside the first column | | `charts` | How many charts follow it | | `diagrams` | How many diagrams are drawn from it | | `followers` | Each chart and diagram that follows it, as `{ pos, kind: 'chart' \| 'diagram' }`, in document order | ### The open input `getOpenInput()` returns `{ pos, view: 'chart-syntax' | 'table', type, delimiter, editing }`. - `editing` is set when the input holds a chart being changed rather than a new one. ## Reading a chart's data `readText` also reads a diagram. | Reader | Returns | | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `read({ pos?, format? })` | A chart as text in a format, `'chart-json'` by default | | `readGrid({ pos? })` | The data as a grid of strings, row 0 the header | | `readTable({ pos? })` | The data as table JSON, or `null` without a table in the Schema | | `readText({ pos? })` | `{ format, text }` of a chart or a diagram, as an author edits it, or `null` ([Text beside the picture](https://tiptap.dev/docs/diagrams/guides/split-view.md)) | | `parseFormat(format, content, type?)` | `{ data, spec, delimiter }` parsed from content | | `getFormat(id)` | A registered format, for its `serialize` | - `parseFormat` throws with a message when the content cannot be parsed. ## What the editor can draw | Reader | Returns | | ------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | `describeCapabilities()` | Chart types (`{ id, label, shape, description? }`), formats, Renderers and their types, sources, delimiters, trigger | | `chartTypes` | The built-in chart types and those of the `chartTypes` option | | `canRender(spec)` | Whether a registered Renderer draws the type | | `rendererFor(spec, preferred?)` | The Renderer a chart would be drawn with | | `diagramRendererFor(format)` | The Diagram Renderer a diagram of that format would be drawn with, or `null` | | `rulesFor(renderer)` | The rules a Renderer's pictures follow, its own and those of `rendererRules`: `{ attribution?, exports? }` | | `refresh()` | Draws every chart and diagram again, after a theme change made in CSS | ## Export | Reader | Returns | | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | `export(target, options?)` | A chart or a diagram as a file, see [export](https://tiptap.dev/docs/diagrams/export.md) | | `exportAll(options?)` | Every chart and diagram that can be drawn, as files with their `pos`, in document order | | `exportDocx(options?)` | A promise of a Word document with native charts and diagrams as pictures: `{ blob, notes }`. See [Word](https://tiptap.dev/docs/diagrams/export.md#word) | ## Data Sources | Reader | Returns | | -------------------------------- | ------------------------------------------------------------------ | | `readSource(source)` | The data a source returns now, without writing it | | `requestSync(source)` | Reads a source and writes it into every chart linked to it | | `registerSource(provider)` | Adds a provider at run time and returns a function that removes it | | `getSource(id)`, `listSources()` | The registered providers | ## Zoom, pan and maximize on screen These act on a chart or a diagram on screen. See [Size and view](https://tiptap.dev/docs/diagrams/guides/size-and-view.md). | Reader | Returns | | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `setZoom(target, zoom)` | Zooms it. `false` when it is not on screen | | `getZoom(target?)` | Its zoom, or `null` | | `setPan(target, { x, y })` | Moves its zoomed picture. `false` when it is not on screen | | `getPan(target?)` | How far the picture is moved, `{ x, y }`, or `null` | | `getShownSize(target?)` | Its size as `setDiagramSize` takes it: its own, or the share of the column and the shape it shows now. `null` when it is not on screen | | `setMaximized(target, maximized)` | Lays it over the window or back into the text. `false` when it is not on screen | | `getMaximized()` | The position of the maximized chart or diagram, or `null` |