Skip to main content
On this page

Types Reference

Basic Types

DiagramType

TypeScript
type DiagramType = 'mermaid' | 'excalidraw' | 'drawio' | 'graphviz'

OutputFormat

TypeScript
type OutputFormat = 'svg' | 'png' | 'jpeg' | 'webp' | 'avif'

Theme

TypeScript
type Theme = 'light' | 'dark' | 'both'

'both' produces two output files per diagram.

LogLevel

TypeScript
type LogLevel =  | 'silent'  | 'error'  | 'errors'  | 'warn'  | 'warning'  | 'warnings'  | 'info'  | 'log'  | 'verbose'

DiagramkitErrorCode

TypeScript
type DiagramkitErrorCode =  | 'UNKNOWN_TYPE'  | 'RENDER_FAILED'  | 'MISSING_DEPENDENCY'  | 'CONFIG_INVALID'  | 'BROWSER_LAUNCH_FAILED'  | 'BUNDLE_FAILED'

Logger

TypeScript
interface Logger {  log: (message: string, ...args: unknown[]) => void  warn: (message: string, ...args: unknown[]) => void  error: (message: string, ...args: unknown[]) => void}

OutputNamingOptions

TypeScript
interface OutputNamingOptions {  prefix?: string  suffix?: string}

Configuration

DiagramkitConfig

TypeScript
interface DiagramkitConfig {  /** Output folder name. Default: '.diagramkit' */  outputDir: string  /** Manifest filename. Default: 'manifest.json' */  manifestFile: string  /** Enable incremental builds. Default: true */  useManifest: boolean  /** Place outputs next to source (no subfolder). Default: false */  sameFolder: boolean  /** Default output formats. Default: ['svg'] */  defaultFormats: OutputFormat[]  /** Default theme. Default: 'both' */  defaultTheme: Theme  /** Output filename prefix. Default: '' */  outputPrefix: string  /** Output filename suffix. Default: '' */  outputSuffix: string  /** Custom extension-to-type overrides */  extensionMap?: Record<string, DiagramType>  /** Directories to scan for diagram files */  inputDirs?: string[]  /** Per-file render overrides (keyed by filename, path, or glob) */  overrides?: Record<string, FileOverride>  /**   * Mermaid aspect-ratio rebalance options. Applies only to mermaid renders.   * Default: `{ mode: 'warn', targetAspectRatio: 4 / 3, tolerance: 2.5 }`.   * See [`MermaidLayoutOptions`](#mermaidlayoutoptions) below.   */  mermaidLayout?: MermaidLayoutOptions}

File Types

DiagramFile

TypeScript
interface DiagramFile {  /** Absolute path to source file */  path: string  /** Filename without extension */  name: string  /** Directory containing the file */  dir: string  /** File extension (e.g. .mermaid, .dot) */  ext: string}

RenderableFile

TypeScript
interface RenderableFile extends DiagramFile {  /** SHA-256 content hash (internal) */  _hash?: string  /** Effective formats after applying overrides (internal) */  _effectiveFormats?: OutputFormat[]  /** Per-output metadata for manifest entries (internal) */  _outputMeta?: OutputMetadata[]  /** Last-seen source mtime, used for fast no-op skips before re-hashing (internal) */  _mtimeMs?: number  /** Last-seen source size in bytes, paired with `_mtimeMs` (internal) */  _size?: number}

OutputMetadata

TypeScript
interface OutputMetadata {  /** Output filename */  file: string  /** Output format */  format: OutputFormat  /** Theme variant */  theme: 'light' | 'dark'  /** SVG width in pixels (SVG only) */  width?: number  /** SVG height in pixels (SVG only) */  height?: number  /** JPEG/WebP/AVIF quality used */  quality?: number  /** Raster scale factor used */  scale?: number}

StaleFile

TypeScript
type StaleFile = RenderableFile

Alias for RenderableFile. Returned by filterStaleFiles().

StalePlanEntry

TypeScript
interface StalePlanEntry {  path: string  effectiveFormats: OutputFormat[]  reasons: StaleReason[]}

StaleReasonCode

TypeScript
type StaleReasonCode =  | 'forced'  | 'manifest_disabled'  | 'no_manifest_entry'  | 'theme_changed'  | 'missing_outputs'  | 'content_changed'

Render Options

RenderOptions

TypeScript
interface RenderOptions {  /** Output format. Default: 'svg' */  format?: OutputFormat  /** Theme variant(s). Default: 'both' */  theme?: Theme  /** JPEG/WebP quality (1-100). Default: 90 */  quality?: number  /** Raster scale factor. Default: 2 */  scale?: number  /** Dark SVG contrast optimization. Default: true */  contrastOptimize?: boolean  /** Custom Mermaid dark theme variables */  mermaidDarkTheme?: Record<string, string>  /** Per-call mermaid aspect-ratio rebalance overrides. Merged on top of the project config. */  mermaidLayout?: MermaidLayoutOptions  /** Config overrides */  config?: Partial<DiagramkitConfig>  /** Optional logger for non-fatal warnings (e.g. mermaid aspect-ratio rebalance notices) */  logger?: Logger  /** Browser pool instance for isolated runtimes (advanced) */  pool?: BrowserPool}

MermaidLayoutOptions

TypeScript
interface MermaidLayoutOptions {  /** Rebalance behaviour. Default: 'warn'. */  mode?: 'off' | 'warn' | 'flip' | 'elk' | 'auto'  /** Target aspect ratio (width / height). Default: 4 / 3 ≈ 1.333. */  targetAspectRatio?: number  /** Tolerance factor; ratio is acceptable when inside [target/tolerance, target*tolerance]. Must be > 1. Default: 2.5. */  tolerance?: number}
Mode Behaviour
off Never measure or rebalance.
warn (default) Measure once and warn when out of band; keep the original render.
flip Swap flowchart direction (LR ↔ TB, RL ↔ BT); keep whichever is closer to target.
elk Inject %%{init:{"layout":"elk","elk":{"aspectRatio":target}}}%%; keep the closer render. Requires the optional @mermaid-js/layout-elk plugin to be available.
auto Try flip first; fall through to elk (and flip + elk) if still outside the band; pick the closest of all attempts.

Only flowchart/graph diagrams are rebalance-eligible. Sequence, gantt, journey, state, ER, class, mindmap, sankey, gitGraph diagrams degrade to warn-only behaviour.

RenderResult

TypeScript
interface RenderResult {  /** Light theme output buffer */  light?: Buffer  /** Dark theme output buffer */  dark?: Buffer  /** Output format used */  format: OutputFormat  /** SVG width in pixels (SVG only) */  width?: number  /** SVG height in pixels (SVG only) */  height?: number}

light is undefined when theme is 'dark'. dark is undefined when theme is 'light'.

RenderAllResult

TypeScript
interface RenderAllResult {  /** Files that were rendered */  rendered: string[]  /** Files skipped (cache hit) */  skipped: string[]  /** Files that failed */  failed: string[]  /** Structured failure details aligned with `failed` */  failedDetails: RenderFailureDetail[]  /** Optional batch timing and lane metrics (when includeMetrics is true) */  metrics?: {    durationMs: number    lanesUsed: number    countsByType: Partial<Record<DiagramType, { rendered: number; failed: number }>>  }}

RenderFailureDetail

TypeScript
interface RenderFailureDetail {  file: string  message: string  code: DiagramkitErrorCode}

Batch Options

BatchOptions

Extends RenderOptions.

TypeScript
interface BatchOptions extends RenderOptions {  /** Root directory to scan. Default: cwd() */  dir?: string  /** Force re-render. Default: false */  force?: boolean  /** Filter by diagram type */  type?: DiagramType  /** Output formats (overrides config). */  formats?: OutputFormat[]  /** Custom logger */  logger?: Logger  /** Logging verbosity level */  logLevel?: LogLevel  /** Show per-file progress logs during batch rendering */  progress?: boolean  /** Max number of type lanes running concurrently (1-4). Default: 4. */  maxConcurrentLanes?: number  /** Include timing and lane metrics in result */  includeMetrics?: boolean  /** Throw a DiagramkitError after batch completes if any diagram failed. Default: false */  strict?: boolean}

Watch Options

WatchOptions

TypeScript
interface WatchOptions {  /** Root directory to watch */  dir: string  /** Callback after render */  onChange?: (file: string) => void  /** Render options */  renderOptions?: RenderOptions & { formats?: OutputFormat[] }  /** Config overrides */  config?: Partial<DiagramkitConfig>  /** Explicit config file path (skips local auto-discovery) */  configFile?: string  /** Custom logger */  logger?: Logger  /** Logging verbosity level */  logLevel?: LogLevel  /** Strict config validation mode for watch startup */  strictConfig?: boolean  /** Optional browser pool instance for isolated runtimes */  pool?: import('./pool').BrowserPool  /** Debounce time for file events. Default: 200ms */  debounceMs?: number  /** Chokidar polling mode (useful for network volumes/containers) */  usePolling?: boolean  /** Chokidar polling interval in ms when usePolling=true */  pollingInterval?: number}

Convert Options

ConvertOptions

TypeScript
interface ConvertOptions {  /** Target raster format */  format: 'png' | 'jpeg' | 'webp' | 'avif'  /** Scale multiplier for SVG rasterization. Default: 2 */  scale?: number  /** JPEG/WebP quality (1-100). Default: 90 */  quality?: number}

Manifest Types

Manifest

TypeScript
type Manifest = {  version: 2  diagrams: Record<string, ManifestEntry>}

ManifestEntry

TypeScript
type ManifestEntry = {  hash: string  generatedAt: string  outputs: ManifestOutput[]  formats: OutputFormat[]  theme?: Theme  mtimeMs?: number  size?: number}

ManifestOutput

TypeScript
type ManifestOutput = {  file: string  format: OutputFormat  theme: 'light' | 'dark'  width?: number  height?: number  quality?: number  scale?: number}

FileOverride

TypeScript
type FileOverride = {  /** Output formats for this file */  formats?: OutputFormat[]  /** Theme variant(s) */  theme?: Theme  /** Raster scale factor */  scale?: number  /** JPEG/WebP/AVIF quality (1-100) */  quality?: number  /** Dark SVG contrast optimization */  contrastOptimize?: boolean}

Runtime Types

RendererRuntime

TypeScript
interface RendererRuntime {  pool: BrowserPool  render: (source: string, type: DiagramType, options?: RenderOptions) => Promise<RenderResult>  renderFile: (filePath: string, options?: RenderOptions) => Promise<RenderResult>  renderDiagramFileToDisk: (file: DiagramFile, options?: RenderOptions & { config?: DiagramkitConfig; outDir?: string; formats?: OutputFormat[] }) => Promise<string[]>  renderAll: (options?: BatchOptions) => Promise<RenderAllResult>  watchDiagrams: (options: WatchOptions) => () => Promise<void>  warmup: () => Promise<void>  dispose: () => Promise<void>}

Returned by createRendererRuntime(). Provides an isolated runtime with its own BrowserPool, separate from the default singleton.

StaleReason

TypeScript
type StaleReason =  | { code: 'forced' }  | { code: 'manifest_disabled' }  | { code: 'no_manifest_entry' }  | { code: 'theme_changed'; requestedTheme: Theme; manifestTheme?: Theme }  | { code: 'missing_outputs'; files: string[] }  | { code: 'content_changed'; previousHash: string; currentHash: string }

Discriminated union returned by planStaleFiles(). Each variant includes the reason code and relevant data for diagnostics.


Validation Types

Exported from both the main diagramkit entry (when using validateSvg* from diagramkit/utils) and the diagramkit/validate subpath.

SvgIssueSeverity

TypeScript
type SvgIssueSeverity = 'error' | 'warning'

SvgIssueCode

TypeScript
type SvgIssueCode =  | 'EMPTY_FILE'  | 'MISSING_SVG_TAG'  | 'MISSING_SVG_CLOSE'  | 'MISSING_WIDTH'  | 'MISSING_HEIGHT'  | 'NO_VISUAL_ELEMENTS'  | 'CONTAINS_SCRIPT'  | 'CONTAINS_FOREIGN_OBJECT'  | 'MISSING_XMLNS'  | 'EXTERNAL_RESOURCE'  | 'INVALID_VIEWBOX'  | 'SVG_TOO_LARGE'  | 'LOW_CONTRAST_TEXT'  | 'ASPECT_RATIO_EXTREME'

ASPECT_RATIO_EXTREME is emitted when the rendered SVG width/height ratio falls outside the readable band (default [1:1.9, 3.3:1] against a 4:3 target). Tunable per call via SvgValidateOptions.aspectRatio — see below.

SvgIssue

TypeScript
interface SvgIssue {  code: SvgIssueCode  severity: SvgIssueSeverity  message: string  suggestion?: string}

SvgValidateOptions

TypeScript
interface SvgValidateOptions {  /** Run the WCAG 2.2 AA contrast scan against rendered text. Default: true. */  checkContrast?: boolean  /** Effective canvas/page background. Default: inferred from `-light.svg` / `-dark.svg` suffix. */  backgroundOverride?: string  /**   * Aspect-ratio sanity check. When the rendered ratio falls outside   * `[target / tolerance, target * tolerance]`, the validator emits   * `ASPECT_RATIO_EXTREME`. Pass `false` to skip the check.   * Default: `{ target: 4 / 3, tolerance: 2.5 }`.   */  aspectRatio?: { target: number; tolerance: number } | false}

SvgValidationResult

TypeScript
interface SvgValidationResult {  file?: string  valid: boolean  issues: SvgIssue[]}

valid is true when no issue has severity: 'error' (warnings do not fail validation).

SvgValidateOptions

TypeScript
interface SvgValidateOptions {  /** Run the WCAG 2.2 AA contrast scan against rendered text. Default: true. */  checkContrast?: boolean  /** Effective canvas/page background. Defaults inferred from the filename suffix. */  backgroundOverride?: string}