A Kotlin Multiplatform diagram rendering SDK with self-hosted parsing, layout, and rendering for Mermaid, PlantUML, and Graphviz DOT. The project targets Android, iOS, Desktop (JVM), macOS Native (arm64), and Web (JS/Wasm), with streaming incremental rendering as a first-class use case.

中文版本

• Three Syntax Families: Parses and renders Mermaid, PlantUML, and Graphviz DOT in one unified KMP codebase.
• Streaming-First Pipeline: Diagram.session() supports append-only incremental parsing, layout, and draw updates for LLM and live-preview scenarios.
• Self-Hosted Engine: Parser, IR, layout, and renderer are implemented in Kotlin without relying on ELK, dagre, Graphviz native, or JS interop shortcuts.
• Compose Multiplatform Rendering: DiagramView(source = ...) is the app-facing Composable and owns language detection, snapshots, and incremental updates internally.
• Incremental Performance Hooks: Includes cached text measurement, stable entity keys, dirty-edge routing, and viewport culling via DrawCommandIndex.
• Broad Syntax Coverage: The demo gallery already exercises Mermaid, PlantUML, and DOT across dozens of diagram families and official-sample-style cases.

• Mermaid: flowchart, sequence, class, state, ER, journey, gantt, pie, gauge, gitGraph, mindmap, timeline, requirement, architecture, C4, sankey, xyChart, quadrantChart, block, kanban, packet.
• PlantUML: sequence, usecase, class, activity, component, state, object, deployment, ERD, timing, salt/wireframe, Archimate, C4, gantt, mindmap, WBS, ditaa, network, JSON, YAML, pie/chart/xy.
• DOT: digraph, graph, clusters, rank/style/color/label subsets, HTML-like label cleanup, ports, and streaming statement-level parsing.

Detailed compatibility notes live in Mermaid, PlantUML, and DOT.

• :diagram-core: shared IR, geometry, theme, diagnostics, draw commands, and export-facing primitives.
• :diagram-layout: self-hosted layout algorithms such as Sugiyama, tree, timeline, chart, and structural layouts.
• :diagram-parser: Mermaid, PlantUML, and DOT parsers plus lowering into the shared IR.
• :diagram-render: Compose rendering facade, streaming session API, viewport-aware canvas, and top-level user-facing entry points.
• :composeApp: cross-platform demo gallery with built-in samples.
• :androidApp: Android host app for local verification.

Starting with 1.1.0, mainline is built with Kotlin 2.4.21 and Compose Multiplatform 1.12.2. Android consumers need compileSdk 37 or later.

Projects that cannot upgrade their toolchain can continue using 1.0.6, built with Kotlin 2.3.20, Compose Multiplatform 1.10.3, and Android compileSdk 36. Pin all Diagram modules to 1.0.6; legacy sources and the publishing workflow are preserved on release-1.0.6.

Add diagram-render if you want the full parsing, layout, and Compose rendering stack.

[versions]
diagram = "<version>"

[libraries]
diagram-render = { module = "io.github.huarangmeng:diagram-render", version.ref = "diagram" }

dependencies {
    implementation(libs.diagram.render)
}

Replace <version> with a published release, using the same version for all Diagram modules.

Use lower-level modules directly only when you need a subset of the stack.

dependencies {
    implementation("io.github.huarangmeng:diagram-core:<version>")
    implementation("io.github.huarangmeng:diagram-layout:<version>")
    implementation("io.github.huarangmeng:diagram-parser:<version>")
}

Markdown renderers can ask the SDK whether a code fence or streaming block should become a diagram before creating Compose UI.

import com.hrm.diagram.render.Diagram

val detection = Diagram.detectSource(fenceBody, hint = fenceInfo)
if (detection.shouldRouteToDiagram) {
    // Render with DiagramView(source = fenceBody)
}

The primary public workflow is a streaming session. Feed source chunks incrementally and finish when the stream ends.

import com.hrm.diagram.core.ir.SourceLanguage
import com.hrm.diagram.render.Diagram

val session = Diagram.session(SourceLanguage.MERMAID)
session.append("""
    flowchart LR
      A[Start] --> B{Decide}
""".trimIndent())
session.append("\n      B -->|yes| C[Ship]\n      B -->|no| D[Stop]\n")

val snapshot = session.finish()
println(snapshot.diagnostics)

DiagramView(...) accepts source text plus an optional DiagramTheme at the app boundary. It wires Compose text measurement into the layout pipeline, detects Mermaid / PlantUML / DOT, and maintains the incremental snapshot internally.

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.hrm.diagram.core.theme.DiagramTheme
import com.hrm.diagram.render.compose.DiagramView
import com.hrm.diagram.render.theme.material3

@Composable
fun MermaidPreview(source: String) {
    val theme = DiagramTheme.material3()
    DiagramView(
        source = source,
        theme = theme,
        modifier = Modifier.fillMaxSize(),
        zoomEnabled = true,
    )
}

• SVG: The shared draw-command export path is already part of the architecture and public contracts.
• PNG/JPEG: Platform exporters consume the shared draw commands. macOS Native (macosArm64) uses CoreGraphics/CoreText/ImageIO; real Native pixel tests remain pending CI validation.

• Android: ./gradlew :androidApp:assembleDebug
• Desktop: ./gradlew :composeApp:run
• Web (Wasm): ./gradlew :composeApp:wasmJsBrowserDevelopmentRun
• Web (JS): ./gradlew :composeApp:jsBrowserDevelopmentRun
• iOS: open iosApp/ in Xcode

./gradlew allTests

• Architecture
• Public API Contract
• Streaming Contract
• Plan and Phase Status
• Testing Strategy
• Contributing Guide

The four SDK modules expose macosArm64 without changing the demo UI. Consumers using Compose 1.12.2 must set org.jetbrains.compose.experimental.macos.enabled=true in gradle.properties. Native test/publication-metadata validation runs in macos-native.yml; Windows klib compilation is not Mac runtime verification. No macOS x64 or Windows/Linux Native target is added. See testing.