コンテンツへスキップ
MermaidKit

MermaidKit

純粋な Swift で書かれたネイティブ Mermaid レンダラー。JavaScript なし、WebView なし、依存ゼロ。全30種のダイアグラムを6プラットフォームでバイト単位まで同一の出力で描画。

試す GitHub ← 全プロダクト

MermaidKit は純粋な Swift で書かれたネイティブ Mermaid レンダラーです。JavaScript なし、WebView なし、依存ゼロ。Mermaid ソースを渡すと、描画済みのダイアグラムが同期的に返ってきます。パースとレイアウトは Apple シリコン上で通常15ミリ秒以内に完了します。箱から箱へ矢印を1本引くためだけにブラウザを丸ごと組み込むのに、うんざりしたから作りました。

インストール

タグ付きリリースは Swift Package Manager でインストールできます:

.package(url: "https://github.com/2389-research/MermaidKit", from: "2.2.0")

Apple プラットフォームでの描画には MermaidRender を、プラットフォーム非依存のパースとレイアウトだけなら MermaidLayout をリンクしてください。Android、Windows/.NET、Flutter、WebAssembly は同じコアを C ABI 経由で利用します。各バインディングは README に説明があります。

SwiftUI では、ダイアグラムはビュー1つです:

MermaidView("""
flowchart TD
    A[Start] --> B{Choice}
    B -->|yes| C[Do it]
    B -->|no| D[Skip]
""")

できること

全30種の Mermaid ダイアグラム。 フローチャート、シーケンス図、ガントチャート、ER 図、状態遷移図、サンキー図、その他すべて。全種類がギャラリーで、ライトとダークの両方で、MermaidKit 自身によって描画されています。

6プラットフォーム、バイト単位まで同一の出力。 1つの Swift コアがダイアグラムをパースし、すべての箱、矢印、ラベルの位置を計算し、完成したレイアウトを SceneWire という小さな JSON シーン記述として各プラットフォームに渡します。Apple デバイスは CoreGraphics で、Linux は Cairo で、Android・Windows・Flutter は Skia で、ブラウザは SVG または Canvas2D で描画します。コアは決定論的で、5つのコンパイルターゲット全体で出力がバイト単位まで同一であることを自動テストが証明しています。

ネイティブな振る舞い。 ダイアグラムはライト/ダークモードに追従し、内容に合わせて自身のサイズを決め、結果をキャッシュするので2回目の描画はタダです。パースできない構文は空白の矩形ではなく、読める等幅テキストにフォールバックします。

Mermaid だけではなく。 同じパイプラインが Graphviz DOT(入出力両方に対応するので Mermaid と DOT の双方向コンバーターにもなります)、Dippin.dip パイプラインファイル、SQL DDL(CREATE TABLE 文が ER 図になります)、そして生の git log 出力(ターミナルにそのまま git グラフとして描画)を受け付けます。

制限事項

MermaidKit がカバーするのは各ダイアグラムタイプのコア構文と、日常的に使う多くの拡張です。mermaid.js の完全なコピーではありません。README のサポート表が、何がカバーされているかを正確に示しています。classDef のようなスタイル指定はエラーにならずスキップされます。テーマ処理はネイティブ側が担うからです。すべての変更に対してジオメトリックリンターが走り、線が箱を突き抜けないこと、ラベルが切れないこと、レイアウトが実行ごとに安定していることを検証します。

必要要件

  • Swift Package Manager 利用者は Swift 6.2+ ツールチェーン
  • ランタイム依存なし: JavaScript エンジンなし、WebView なし
  • Linux のラスタライズは Silica 経由の Cairo で描画(LinuxRaster パッケージトレイトでオプトイン)
GitHub で見る →
33 ページ · hugo 0.148.2 · c08c358 · 構築済み Sep 1 18:36
2389 Radio
2389 RADIO ステーションを選択