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), 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.

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

[versions]
diagram = "1.0.4"

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

dependencies {
    implementation(libs.diagram.render)
}

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

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

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: Export contracts exist in the core API, while the full multi-platform export pipeline is still being completed as part of the release roadmap.

• 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