[!IMPORTANT] CMP Mermaid implements all 33 official diagram families from Mermaid 12.0.0. Swimlanes has been revalidated after a direct upstream translation: its classic-look production, 256-case visual, and per-edge topology gates are current. The overall Mermaid 12.0.0 contract remains not Stable because Architecture's legal randomize: true path and legal look: handDrawn input return documented MermaidError.UnsupportedFeature results, and seven detail cases remain under review: five Architecture and two Kanban. The full JVM and Wasm core suites pass.

The current 8,448-case Native/Official independent-scenario visual report gives every family 256 real, label-normalized Mermaid sources. Flowchart retains its dedicated coverage corpus; the other 32 families use the complete 256-combination matrix of eight family-specific capability axes. Source, duplicate, detail, geometry, and 528 contact-sheet gates preserve the result. The 441 hand-authored production scenarios and 8,448 text/layout stress inputs remain separate evidence layers.

CMP Mermaid is designed for applications that render many diagrams without a WebView per diagram. The production path does not embed Mermaid.js and does not include a network client or require android.permission.INTERNET: parsing, diagram state, layout preparation, SceneGraph generation, and final Compose Canvas painting are owned by the multiplatform libraries.

All 33 implemented families retain repository-controlled tests and corpus data, published Native/Official captures, and passing replacement detail and geometry gates.

All fresh Swimlanes translation, topology, visual, JVM, Wasm, production isolation, and publication gates have completed. The refreshed Flowchart matrix has 107 unique graph topologies and passes all 256 per-edge routing cases. Overall Mermaid 12.0.0 support remains not Stable until the Architecture gaps, seven detail reviews, and legal RoughJS-backed unsupported handDrawn look are resolved, and the remaining formula stages are translated and revalidated. A legal feature that cannot be represented faithfully returns MermaidError.UnsupportedFeature instead of silently drawing a misleading approximation. An explicitly documented non-semantic fallback, such as plain-text formula source, returns MermaidDiagnostic.UnsupportedFeature in the successful MermaidScene.

The comparisons below use the same Mermaid source, theme, layout mode, and fixed viewport. The goal is equivalent meaning and comparable visual quality, not pixel-identical browser output; platform font metrics may differ.

Flowchart: multi-region failover

CMP Native - Compose Canvas	Official - Mermaid.js 12.0.0

More same-source comparisons

XY Chart: mixed bar and line series

CMP Native - Compose Canvas	Official - Mermaid.js 12.0.0

State Diagram: labels, loops, branches, and terminal states

CMP Native - Compose Canvas	Official - Mermaid.js 12.0.0

The current published report contains 441 independent production comparisons plus 8,448 independent-scenario visual cases. A separate 8,448-input text/layout stress corpus remains available for wrapping and layout-pressure regressions: open all 528 independent-scenario visual-evidence pages.

All 33 implemented types support Mermaid frontmatter, relevant metadata, Unicode, and the relevant theme variables within their documented compatibility boundaries.

Open the live Kotlin/Wasm demo to browse syntax, render the galleries, switch all 11 themes, and compare CMP Native output with the pinned Mermaid.js reference. Every supported diagram type has an editable Playground with Native/Official preview switching. Mindmap can switch among CoSE-Bilkent, Dagre, and tidy-tree layouts.

The official comparison renderer belongs to mermaid-debug-ui only. mermaid-core and mermaid-compose never use Mermaid.js.

Mermaid source
    -> Kotlin preprocessor and translated parser
    -> translated diagram database and layout preparation
    -> platform-independent MermaidScene
    -> Compose Canvas

• mermaid-core owns parsing, diagram state, layout adapters, typed errors, themes, and the platform-independent SceneGraph.
• mermaid-compose owns Canvas painting, text measurement, assets, interactions, and pan/zoom behavior.
• mermaid-debug-ui owns documentation, galleries, Playground, official comparison, and load-test screens. It is optional and should remain outside production release variants.
• sample/* contains thin Android, iOS, Desktop, and Web launchers around the shared debug UI.

The production libraries contain no JavaScript engine or bundled JavaScript algorithm. Pure Kotlin Dagre is the default unified layout. ELK names and flowchart-elk are recognized as upstream inputs but return MermaidError.UnsupportedFeature("ELK layout"); they are never silently substituted with another layout.

The current publication coordinates are:

Version 0.1.18 makes MermaidRenderOptions.ganttUseWidth nullable so that an absent value uses Compose parent content width, while every explicit value still overrides it. Core without a parent keeps the 1200 fallback. Rebuild consumers against the changed API. The full-family and physical-device matrices below retain historical evidence; the fresh repair audit is linked above.

Current Kotlin Multiplatform projects:

dependencies {
    implementation("io.github.swithun-liu:mermaid-compose:0.1.21")
}

[!NOTE] The Maven coordinates above are published and resolvable from the configured public repository. CocoaPods distribution remains a separate binary release path.

Android projects pinned to Kotlin 1.7.21 use the isolated Android artifact:

dependencies {
    implementation(
        "io.github.swithun-liu:mermaid-compose-android-kotlin17:0.1.21",
    )
}

The Kotlin 1.7.21 artifacts are Android-only, target JVM 1.8, and require Android API 24 or newer. Their artifact names are intentionally distinct from the current KMP modules, so a consumer cannot accidentally resolve Kotlin 2.x metadata.

Android View-based hosts can use the same Compose renderer without compiling Compose source:

val diagramView = CMPMermaidView(context).apply {
    setMermaidSource("flowchart LR\n  A --> B")
    setMermaidContentDescription("Example Mermaid diagram")
    setMermaidErrorListener { error ->
        reportRenderFailure(error.type, error.message, error.source)
    }
}
container.addView(diagramView)

CMPMermaidView is available from both the current Android target and the Kotlin 1.7.21 Android artifact.

iOS projects can consume the precompiled static XCFramework through CocoaPods:

pod 'CMPMermaid', '0.1.21'

The binary exposes CMPMermaidViewControllerFactory.makeViewController(...) to Swift and includes all renderer font resources. It supports iOS device arm64 and simulator arm64/x86_64 with a deployment target of iOS 14.

CMPMermaidViewControllerFactory().makeViewController(
    source: source,
    contentDescription: "Mermaid diagram",
    onContentSizeChanged: nil,
    onError: { error in
        reportRenderFailure(error.type, error.message, error.source)
    }
)

For a source checkout:

dependencies {
    implementation(project(":mermaid-compose"))
    debugImplementation(project(":mermaid-debug-ui"))
}

Basic Compose usage:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.swithun.cmpmermaid.compose.MermaidDiagram
import com.swithun.cmpmermaid.core.MermaidTheme
import com.swithun.cmpmermaid.core.MermaidThemePreset

@Composable
fun Diagram(source: String) {
    MermaidDiagram(
        source = source,
        modifier = Modifier.fillMaxWidth(),
        theme = MermaidTheme.preset(MermaidThemePreset.Default),
        contentDescription = "Mermaid diagram",
        onError = { error ->
            reportRenderFailure(error.type, error.message, error.source)
        },
    )
}

Formula rendering is an optional host extension. CMP Mermaid does not bundle a formula parser, a platform View, or a native image type. The host first adapts its platform formula engine to MermaidFormulaRenderer:

import com.swithun.cmpmermaid.compose.MermaidFormulaArtifact
import com.swithun.cmpmermaid.compose.MermaidFormulaError
import com.swithun.cmpmermaid.compose.MermaidFormulaPainter
import com.swithun.cmpmermaid.compose.MermaidFormulaRenderer
import com.swithun.cmpmermaid.compose.MermaidFormulaRequest
import com.swithun.cmpmermaid.compose.MermaidFormulaRenderingMode
import com.swithun.cmpmermaid.core.GMResult

private data class HostFormulaOutput(
    val width: Float,
    val height: Float,
    val baseline: Float,
    val accessibilityText: String,
    val painter: MermaidFormulaPainter,
)

private interface HostFormulaAdapter {
    suspend fun render(
        request: MermaidFormulaRequest,
    ): GMResult<HostFormulaOutput, MermaidFormulaError>
}

private fun HostFormulaAdapter.asMermaidFormulaRenderer(): MermaidFormulaRenderer =
    MermaidFormulaRenderer { request ->
        when (val result = render(request)) {
            is GMResult.Ok -> {
                val output = result.value
                GMResult.Ok(
                    MermaidFormulaArtifact(
                        width = output.width,
                        height = output.height,
                        baseline = output.baseline,
                        accessibilityText = output.accessibilityText,
                        painter = output.painter,
                    ),
                )
            }
            is GMResult.Err -> GMResult.Err(result.error)
        }
    }

In a KMP host, the concrete HostFormulaAdapter normally lives in androidMain, iosMain, or the host dependency-injection layer. It may rasterize the platform result and capture that image in MermaidFormulaPainter; CMP Mermaid never imports or discovers the platform formula engine.

The host then injects that renderer into the normal Compose entry point:

val hostFormulaRenderer = hostFormulaAdapter.asMermaidFormulaRenderer()

MermaidDiagram(
    source = source,
    formulaRenderer = hostFormulaRenderer,
    formulaRenderingMode = MermaidFormulaRenderingMode.Automatic,
    onFormulaError = { request, error ->
        reportFormulaFallback(request.source, error.message)
    },
)

The adapter contract is:

• request.source contains the formula without the surrounding $$ delimiters. The adapter should also honor displayMode, color, and accessibilityText.
• maxWidth and fontSize are Mermaid's computed CSS pixels expressed as scene logical pixels. maxWidth constrains intrinsic formula content; it does not request a bitmap that fills the complete width. rasterScale tells a bitmap-backed adapter how many physical pixels to allocate per logical pixel; MermaidDiagram supplies the current Compose density automatically.
• Returned width, height, and baseline use logical pixels and describe the provider's intrinsic formula layout box, equivalent to KaTeX's <math> box. They do not include Mermaid's wrapping width or label background padding. Width and height must be finite and positive; baseline must be finite and within 0..height.
• render is suspending and may run away from the UI thread. An adapter whose platform engine requires the main thread must perform that dispatch itself.
• The returned painter is invoked later by Compose Canvas and must keep its drawing resources alive until then. CMP Mermaid supplies logical bounds matching the returned intrinsic dimensions. Bitmap-backed painters must convert physical pixels by rasterScale and preserve the content aspect ratio; Mermaid-specific outer layout remains owned by CMP Mermaid. No platform View is inserted into the diagram.
• Expected platform, syntax, or resource-limit failures return GMResult.Err(MermaidFormulaError...). Coroutine cancellation and fatal process errors must continue to propagate.

The explicitly supplied host renderer takes precedence over any future built-in renderer. MermaidFormulaRenderingMode.PlainText bypasses all renderers. A selected renderer failure falls back directly to the visible formula source; it does not switch implementations or fail the complete diagram. The shared HTML-label path supports ordinary text around $$...$$ and multiple formula blocks, following Mermaid 12.0.0's per-match replacement and CSS flex layout. Direct HTML inline elements retain their formatting. Formula children nested inside user HTML, block formatting with margins, Sequence, ZenUML, and Event Modeling formula stages remain documented unsupported boundaries. Formula support remains non-Stable; the 28-source composition audit records current Native/Official findings separately from the main visual corpus.

The error callback receives MermaidRenderErrorInfo, including the original source passed to the renderer. CONTENT_ERROR represents structured parse, configuration, resource-limit, or unsupported-content failures. UNEXPECTED_EXCEPTION represents an ordinary exception caught inside the render pipeline or Compose drawing boundary. The Compose surface renders Mermaid.js 12.0.0's standard error diagram while the callback and onRenderResult retain the detailed typed diagnostic. The published source-mutation corpus verifies Official accept/reject outcome parity for all 8,448 mutations. Native rejected inputs remain typed CONTENT_ERROR; exact diagnostic-message equality is reported separately for 1,798/6,292 paired errors and is not manufactured as a compatibility requirement. Coroutine cancellation and fatal process errors continue to propagate.

Generate all KMP publications under build/maven-repository:

./gradlew \
  :mermaid-core:publishAllPublicationsToBuildRepository \
  :mermaid-compose:publishAllPublicationsToBuildRepository

Generate the Kotlin 1.7.21 Android artifacts with JDK 11:

./android-legacy-build/gradlew -p android-legacy-build \
  assembleRelease \
  verifyLegacyPublicationCoordinates \
  publishLegacyToReleaseRepository

Generate and verify the static iOS binary with JDK 17:

./gradlew :mermaid-compose:podPublishReleaseXCFramework
tools/release/verify-ios-xcframework.sh

The Quality Gate builds and verifies the iOS XCFramework once and preserves it with its exact source commit. Pushing a v* tag then builds the modern KMP and Kotlin 1.7.21 Android artifacts in parallel while reusing only the successful verified iOS artifact from the successful main push Quality Gate for that immutable tag commit. All outputs are joined and verified again before any public registry is updated.

An interrupted publication keeps its prerelease and verified workflow artifact for 14 days. Re-run the failed jobs, or manually run the Release workflow with the same immutable tag. Maven Central and CocoaPods are checked before each write, so an already-published version is verified and skipped instead of being uploaded again.

All 11 Mermaid 12.0.0 presets are included: default, dark, forest, neutral, base, neo, neo-dark, redux, redux-color, redux-dark, and redux-dark-color.

Business themes can start from a preset with Kotlin copy, or consume Mermaid-compatible themeVariables through MermaidTheme.withVariables(...). Invalid external values are returned as GMResult.Err.

val brandTheme = MermaidTheme.preset(MermaidThemePreset.ReduxColor).copy(
    background = SceneColor(0xFF101820),
    nodeFill = SceneColor(0xFFF2AA4C),
    nodeText = SceneColor(0xFF101820),
    edge = SceneColor(0xFFF2AA4C),
)

Arbitrary themeCSS depends on browser DOM/CSS semantics and returns MermaidError.UnsupportedFeature. Portable styling uses typed Kotlin theme objects and MermaidFontFamilyResolver.

CMP Mermaid follows a source-mapped translation workflow rather than reimplementing behavior from screenshots:

1. Pin Mermaid, Jison, D3, Marked, Dagre, CoSE-Bilkent, and tidy-tree versions.
2. Map every Kotlin parser, DB, layout, shape, theme, and renderer boundary to its upstream Mermaid source.
3. Generate parser tables, rules, entities, fixtures, and debug-only reference assets from pinned inputs.
4. Translate only the upstream delta for a Mermaid upgrade.
5. Re-run the complete parity and platform gates.

Source maps: Flowchart · XY Chart · Quadrant Chart · Timeline · Kanban · Sequence · Class · State · ER · Formula rendering · Gantt · Pie · User Journey · Requirement · Git Graph · Mindmap · Packet · Radar · Sankey · Treemap · Venn · Ishikawa · Cynefin · Event Modeling · Agentflow · Block

Run the JVM and publication gates:

./gradlew \
  :mermaid-core:jvmTest \
  :mermaid-compose:jvmTest \
  verifyPublicationCoordinates

Run the samples:

./gradlew :sample:androidApp:installDebug
./gradlew :sample:desktopApp:run
./gradlew :sample:webApp:wasmJsBrowserDevelopmentRun

The stability test report contains the complete cross-platform build and Native/Official visual reproduction commands.

CMP Mermaid is released under the MIT License. Translated Mermaid behavior and development-only reference assets retain their upstream notices in THIRD_PARTY_NOTICES.md.