# Diagram Modules

One size-optimized compiler module per diagram type, as base64 or a raw `.wasm` file.

Each `ondine/compiler/wasm/<type>` entrypoint contains only the code that renders `<type>`. Thus a page that compiles one type downloads much less than [`ondine/compiler/wasm/all`](/docs/api/compiler-wasm/all). Register each module under its type for [`create`](/docs/api/compiler/create).

```ts title="preview.ts"
import { create } from 'ondine/compiler/wasm'
import { wasm as flowchart } from 'ondine/compiler/wasm/flowchart'
import { wasm as sequence } from 'ondine/compiler/wasm/sequence'

// Renders flowcharts and sequence diagrams, and throws RenderError for other types
const renderer = create({ modules: { flowchart, sequence } })
```

## Types

Each entrypoint name is one of these diagram types: `agentflow`, `architecture`, `block`, `c4`, `class`, `cynefin`, `er`, `eventmodeling`, `flowchart`, `gantt`, `git`, `info`, `ishikawa`, `journey`, `kanban`, `mindmap`, `packet`, `pie`, `quadrant`, `radar`, `railroad`, `requirement`, `sankey`, `sequence`, `state`, `swimlane`, `timeline`, `treemap`, `treeview`, `usecase`, `venn`, `wardley`, and `xychart`.

## Exports

### wasm

* **Type:** `string`

The bytes of the module as base64, exported by `ondine/compiler/wasm/<type>`. `create` compiles them synchronously at the first render of that type.

```ts
import { create } from 'ondine/compiler/wasm'
import { wasm } from 'ondine/compiler/wasm/pie'

// Registers the module under its diagram type
create({ modules: { pie: wasm } })
```

### Raw Modules

* **Type:** WebAssembly binary

`ondine/compiler/wasm/<type>.wasm` is the same module as a file. Bundlers and hosts that compile WebAssembly ahead of time, such as Cloudflare Workers, use this file. `all.wasm` contains every type. `all.fast.wasm` contains every type, optimized for speed instead of size.

In a browser, fetch the file and compile it with `WebAssembly.compileStreaming`. The file is about a quarter smaller than the base64 export after compression, and the browser compiles it while it downloads.

```ts title="preview.ts"
import { create } from 'ondine/compiler/wasm'
import url from 'ondine/compiler/wasm/flowchart.wasm?url'

// Compiles the module while it downloads
const flowchart = await WebAssembly.compileStreaming(fetch(url))
const renderer = create({ modules: { flowchart } })
```

```ts title="worker.ts"
import { create } from 'ondine/compiler/wasm'
import flowchart from 'ondine/compiler/wasm/flowchart.wasm'

// The bundler compiles the module, so the Worker does not compile it at runtime
const renderer = create({ modules: { flowchart } })
```