# @shumoku/renderer-html

Canonical: https://docs.shumoku.dev/ja/library/packages/renderer-html
Language: ja

libs/@shumoku/renderer-html/README.md

# @shumoku/renderer-html

Generate interactive HTML topology diagrams.

日本語版はまだありません。英語の原文を表示しています。

Interactive HTML renderer for [Shumoku](https://github.com/konoe-akitoshi/shumoku). Wraps the canonical [`@shumoku/renderer`](https://docs.shumoku.dev/ja/library/packages/renderer) static SVG output in a self-contained page with pan, zoom, tooltips, and — for large networks — multi-sheet navigation. Legacy prepared layouts without `ResolvedLayout` remain compatible through `@shumoku/renderer-svg`.

## Install

```
npm install @shumoku/renderer-html @shumoku/core
```

## Quick start

```
import { YamlParser } from '@shumoku/core'
import { renderGraphToHtml } from '@shumoku/renderer-html'

const { graph } = new YamlParser().parse(yaml)

const html = await renderGraphToHtml(graph, { title: 'My Network', toolbar: true })
```

## API

| Function | Description |
| --- | --- |
| `renderGraphToHtml(graph, options?)` | `async` — parse-to-HTML convenience |
| `renderGraphToHtmlHierarchical(graph, options?)` | `async` — convenience with sheet navigation |
| `renderHtml(prepared, options?)` | **sync** — render a `PreparedRender` to HTML |
| `renderHtmlHierarchical(prepared, options?)` | `async` — render with sheets |

### Options (`HTMLRenderOptions`)

| Field | Type | Notes |
| --- | --- | --- |
| `title` | string | Page / document title |
| `branding` | boolean | Show the Shumoku mark |
| `toolbar` | boolean | Show the pan/zoom toolbar |
| `theme` | `'light' | 'dark'` | Override `graph.settings.theme` |
| `sheets` | `Map<string, SheetData>` | Pre-computed hierarchical sheets (skips recomputation) |

The one-liner and prepared-render pipelines use `ResolvedLayout` and the same SVG geometry as CLI, PNG, server output, and the Svelte renderer. The generated SVG retains node, port, link, and sheet data attributes required by the tooltip and navigation runtime.

### Embedding

The interactive behavior ships as an IIFE bundle. Use `getIIFE()` / `setIIFE()` / `INTERACTIVE_IIFE` to inline or supply it, and `initInteractive()` to wire up an already-rendered SVG in the browser.

## License

AGPL-3.0-only. For commercial licensing, contact [contact@shumoku.dev](mailto:contact@shumoku.dev).