🪴 namaraii.com

Mermaidの可視化作例

作成日: 2024年8月27日更新日: 2024年8月27日

Mermaidを使った可視化の作例

関連リンク

可視化のツール・サービス

インフォグラフィックスを簡単に作成できるWebサービス Infogr.am D3.jsを使えるDockerイメージを作った ソフトウェアアーキテクチャのためのC4モデル D2 Declarative Diagramming Mermaid RとRStudioのインストール(Mac) .

Garmin

Garminは、GPS技術を用いた製品の開発および製造を行うアメリカ合衆国の企業である。 1989年に設立され、ナビゲーション、航空、海洋、フィットネス、アウトドアレクリエーションなど多岐にわたる分野で使用されるGPS機器やスマートウォッチを提供している。Garminの製品は、高精度な測位情報と多機能性で、プロフェッショナルから一般ユーザーまで幅広く支持されている。 ...

Garmin Connectへ体重を取り込む方法

最近､Garmin Connectへ体重が取り込まれないと思ったら､MyFitnessPal: 健康管理というアプリの使用を止めたからだった。 Garmin Connectに複数の体重データがあるのはなぜですか | Garmin サポートセンターによると､Garmin Connectへ体重を取り込む方法としては､ Garmin ...

🤖 自動でサイト更新している横浜FC関連ニュースサイト

ながらくTwitterで横浜FC関連のニュースをTweetするbotを運営していたが､APIが使用できなくなってしまい､残念ながら2023年の7月に運用を停止した。 その後､横浜FC botはMastodonに場所を移し､引き続き運用している。 横浜FC bot (@yokohamafcbot@mstdn.jp) ...

ソフトウェアアーキテクチャのためのC4モデル

C4モデルとは ソフトウェアのアーキテクチャを表現するためのモデル。 コンテキスト（context） コンテナ（containers） コンポーネント（components） コード（code） で構成される。 C4モデルは特別な表記法を規定していない。以下、ダイアグラムの図はThe C4 model for visualising ...

D2 Declarative Diagramming

terrastruct/d2: D2 is a modern diagram scripting language that turns text to diagrams. テキストからダイアグラムを生成するツール。類似のツールとしてはMermaid、GraphViz、PlantUMLなどがあり、以下のサイトでこれらのツールで同じダイアグラムを書く場合の比較が可能。このサイトはD2開発元によるものらしい。 Text to diagram テキストと出力の例 公式サイトからの引用 # Actors hans: Hans Niemann defendants: { mc: Magnus Carlsen playmagnus: Play Magnus Group chesscom: Chess.com naka: Hikaru Nakamura mc -> playmagnus: Owns majority playmagnus <-> chesscom: Merger talks chesscom -> naka: Sponsoring } # Accusations hans -> defendants: 'sueing for $100M' # Offense defendants.naka -> hans: Accused of cheating on his stream defendants.mc -> hans: Lost then withdrew with accusations defendants.chesscom -> hans: 72 page report of cheating インストール d2/INSTALL.md at master · terrastruct/d2 Macの場合はbrew install d2でOK レイアウトエンジン(TALA) ソフトウェアアーキテクチャ図に特化したレイアウトエンジンterrastruct/TALA: A diagram layout engine designed specifically for software architecture diagramsがあるようなのでインストール。 Macの場合はbrew install terrastruct/tap/talaでOK D2から使用する場合は環境変数D2_LAYOUTにtalaを指定する。 $ D2_LAYOUT=tala d2 in.d2 out.svg プラグイン terrastruct/d2-obsidian: The official D2 plugin for Obsidian.

機械学習のアルゴリズム選択フローチャート

Choosing the right estimator — scikit-learn 1.2.0 documentationを元にMermaidでまとめた。 flowchart TD A((Start))--> B{50サンプル以上?} B -->|Yes| B1{カテゴリの\n予測?} B -->|No| B2((データを収集)) ...

Zettelkastenのノートの種類と保存先

Zettelkastenに保存するノートの種類と保存先とその関連について。 以下はObsidianでつなげる情報管理術の一章『Zettelkasten』に掲載されている図を参考にMermaidで描いたもの。 flowchart TD subgraph FleetingNotes 一時的なメモ[fa:fa-sticky-note ...

Mermaid

テキストから各種のダイアグラム・チャートを生成できるライブラリMermaid ObsidianでもQuartzでもサポートされている。 シーケンス図 sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are ...

本サイト向けQuartzカスタマイズ内容

ページの内容が古くなっています このページは旧バージョン(v3)のQuartzを対象とした内容になっています。 v4からアーキテクチャが大きく変わっていますのでご注意ください。 本サイトはObsidianで管理しているノートをQuartzを使って公開しているが、本サイト向けにカスタマイズした内容をまとめておく。 トップページ 最近更新されたノート一覧の表示 gitのcommit日時を更新日時として取り扱って、新しい順に表示する設定にした。 config.tomlenableGitInfo = true HugoでGit情報を扱うための設定 data/config.yamlenableRecentNotes: true Scrapboxのようなカードビュー 更新日時の新しい順に表示 layouts/partials/recent.html{{- $paginator := slice }} {{- if .Site.IsServer }} {{- $paginator = .Paginate .Site.RegularPages.ByDate.Reverse }} {{- else }} {{- $paginator = .Paginate .Site.RegularPages.ByLastmod.Reverse }} {{- end }} <div class="container__wrapper"> {{- range $paginator.Pages }} {{ partial "summary.html" . }} {{- end -}} </div> <div class="pager"> {{ template "_internal/pagination.html" . }} </div> ノート中に画像があれば先頭画像をアイキャッチとして使用し、無ければサマリを表示するようにした。 Hugoで本文の先頭画像をアイキャッチとして使用する layouts/partials/summary.html<div class="card"> <h3 class="heading card__item flexible"><a href="{{ .Permalink }}" class="internal-link" data-src="{{ .RelPermalink }}">{{- .Title -}}</a></h3> {{- $image := index (findRE "<img.*?src=([^>]*)?>" .Content 1) 0 }} {{- if $image }} <figure class="ellipsis card_img"> {{ $image | safeHTML }} </figure> {{- else }} <p class="ellipsis card_summary"> {{ .Summary }} </p> {{- end }} </div> ノート 作成日と更新日を表示する ノート上部へ作成日、更新日を表示するためpartialテンプレートを修正 layouts/partial/date-fmt.html{{ i18n "create_date" }} : {{- if .Date}} {{- .Date.Format "2006年1月2日"}} {{- else}} Unknown {{- end}}    {{ i18n "last_updated" }} : {{- if .Lastmod}} {{- .Lastmod.Format "2006年1月2日"}} {{- else}} Unknown {{- end}} Scrapbox的な2ホップリンクを表示する QuartzにScrapbox的な2ホップリンクを追加する Amazon商品紹介用ショートコードの導入 Amazonの商品紹介用ショートコードを導入した。layouts/shortcodes配下へ置くと普通に動くが、当然ながらObsidianでのプレビューはできない。 Amazonの商品紹介用ショートコードは、こちらのものを利用させてもらった。 Hugoでわりと楽してわりとかっこよくAmazon商品紹介をする - ゆーすけべー日記 こんな感じで表示されます。 Mermaid.jsのソースコード参照用リンク mermaid で描いた図を載せている箇所へ、ソースコードを参照するためのリンクを自動的に追加するようにした（廃止: 2023/01/04) Wiki形式のリンク表示にFrontMatterのTitleを使用する このサイトではMarkdownファイルの可搬性を考慮し、 ノートのファイル名に日本語を使用しない 日本語のタイトルは各ファイルのFrontMatterへ記述する という運用をしているがこの場合、Wiki形式で内部ページへのリンクを記述してもFrontMatterのタイトル表示されず可読性が悪い。 このため、Titleがあればそれを使用するように修正した。 foobar.mdのFrontMatterへtitle: フーバーを設定していた場合、[[foobar]]と書くと、 <a href="foobar">フーバー</a> が展開される。52行目を修正、53行目を追加した。 layouts/partial/textprocessing.html <!-- If path to Hugo page --> {{if not (eq $curpage.String "nopPage") }} {{$block := default "" (index $reference 1)}} {{$block = strings.TrimRight "/" (cond (eq $block "") $block (printf "#%s" $block)) | urlize | lower}} {{$href := $curpage.RelPermalink}} {{$display := default $display $curpage.Title}} {{$link := printf "<a href=\"%s%s\" rel=\"noopener\" class=\"internal-link\" data-src=\"%s\">%s</a>" $href $block $href $display }} Obsidianのノートを外部公開する場合のデッドリンク問題 Excalidrawで描いた図を使用する これはカスタマイズではないが、Obsidianのobsidian-excalidrawプラグインで描いた図をObsidian/Quartzの両方で使用する運用について。 QuartzでExcalidrawで描いた図を使う運用 全体 katex.jsの読み込みをページ単位で制御する Quartzのデフォルトの動作ではdata/config.yamlのenableLatexをtrueに設定すると、サイト全体でKatexが有効になり、Katexを使用していないページでも以下のファイルが無条件にロードされる。 cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/copy-tex.min.js 本サイトでは数式を記述しているページは少なく効率化のため、 サイト全体としてはデフォルト未使用 ページ単位でKatex要否を指定可能 とする修正をした。1 layouts/partials/katex.html{{if .Params.enableLatex}} ページパラメタのenableLatexを参照してロード要否を判断するように修正。 layouts/partials/head.html{{if .Params.enableLatex }} renderMathInElement(doc.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, ], macros: { '’': "'" }, throwOnError : false }); {{end}} 上と同じ。あとは、data/config.yamlのenableLatexを削除した。 Footnotes Hugoのレンダーフックで処理できるかもしれないが未調査 ↩

AsciidoctorのDockerイメージにmermaidを追加

htakeuchi/docker-asciidoctor-jpにmermaidを追加しました。 Dockerイメージにmermaidをインストールする際、以下の問題があり、単純にインストールできなかったのですが、とりあえず使える状態にしました。 mermaid CLIで前提にしているPhantomJSのnpmパッケージがAlpine ...

最近の記事

さらに462件 →