Diagram text in, a native SwiftUI view out.

Whatever your users paste

DiagramKit detects the dialect, so one view handles all four.

Mermaid

flowchart TD
    text[Diagram text]
    ir[Native IR]
    layout[GraphKit layout]
    view[DiagramView]
    tap[onElementTap]
    export[PNG, PDF, SVG]
    text --> ir
    ir --> layout
    layout --> view
    view --> tap
    view --> export

The direction goes in the header: TD is top down.

PlantUML

@startuml
rectangle "Diagram text" as text
rectangle "Native IR" as ir
rectangle "GraphKit layout" as layout
rectangle "DiagramView" as view
rectangle "onElementTap" as tap
rectangle "PNG, PDF, SVG" as export
text --> ir
ir --> layout
layout --> view
view --> tap
view --> export
@enduml

Every diagram sits between @startuml and @enduml.

D2

text: Diagram text
ir: Native IR
layout: GraphKit layout
view: DiagramView
tap: onElementTap
export: PNG, PDF, SVG
text -> ir
ir -> layout
layout -> view
view -> tap
view -> export

No header. A colon labels a shape, and -> draws an edge.

DOT

digraph {
    text [label="Diagram text"]
    ir [label="Native IR"]
    layout [label="GraphKit layout"]
    view [label="DiagramView"]
    tap [label="onElementTap"]
    export [label="PNG, PDF, SVG"]
    text -> ir
    ir -> layout
    layout -> view
    view -> tap
    view -> export
}

Graphviz’s own language, with attributes in square brackets.

Each dialect keeps its own defaults, so DOT draws ellipses and D2 draws heavier boxes. The layout underneath is the same.

Mindmaps to Gantt charts

Graphs, charts and timelines come out as native views, laid out with GraphKit or drawn with Swift Charts.

Diagrams are data

Every node, edge, pie slice and Gantt bar comes back to your code as a DiagramElement when it’s tapped. Build drill-downs and navigation on it instead of shipping a picture.

struct PipelineScreen: View {
    @State private var selected: String?

    var body: some View {
        DiagramRenderer(.mermaid(source))
            .onElementTap { element in
                if case let .node(id, _) = element {
                    selected = id
                }
            }
    }
}

Malformed text doesn’t crash the view. .onError hands you the error, and you choose what to show.

Four themes, or yours

DiagramView(mermaid: source, theme: .monochrome)

You can also pass your own theme conforming to DiagramTheme, or a dialect’s own theme, such as Mermaid’s forest. Themes don’t follow the system appearance on their own; you pick the theme for dark mode.

What it renders

What this edition renders, checked by DiagramKit’s own fidelity benchmark against each dialect’s reference renderer.

• Supported (✓): renders correctly, close to the reference.
• Partial: renders, with visible differences from the reference.
• † Provisional: fewer than four scored samples.
• Charts and Gantt are drawn with Swift Charts.
• On request: not in this edition; built when a customer asks for it.

D2 containers, styled shapes, sql_table and class shapes. Raw Graphviz DOT goes straight to GraphKit, clusters included.

Requirements

Platforms

iOS 17, macOS 14 and visionOS 2.4, or later

Hardware

Apple silicon. Simulator builds need an Apple silicon Mac.

Delivery

An xcframework and a Swift package, from your download link after purchase

Layout

GraphKit, included

Not supported: Intel Macs, x86_64 simulators and CI runners, Mac Catalyst, watchOS, tvOS.

License

DiagramKit includes GraphKit, licensed for use inside DiagramKit. There’s a 14-day money-back guarantee if DiagramKit doesn’t work as described and we can’t fix it. Payments run through Paddle. DiagramKit also includes Graphviz under the Eclipse Public License 2.0 (source).