🪴 namaraii.com

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

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

関連リンク

Mermaidの可視化作例

Mermaidを使った可視化の作例 🤖 自動でサイト更新している横浜FC関連ニュースサイト 自作ニュースサイトのシステム概要図的なもの Garmin Connectへ体重を取り込む方法 体重計からGarmin Connectへのデータの流れ ソフトウェアアーキテクチャのためのC4モデル C4モデルの記述例 機械学習のアルゴリズム選択フローチャート ...

ソフトウェアアーキテクチャのための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.

RとRStudioのインストール(Mac)

brewでインストール（したことの備忘録） $ brew install r $ brew install --cask rstudio インストールしたパッケージ RStudioのコンソールからinstall.packages("パッケージ名")として以下のパッケージをインストールした。 data.table ...

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

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のレンダーフックで処理できるかもしれないが未調査 ↩

Jupyter Notebooks上でTensorflow/Ruby/D3.jsを使えるDockerイメージを作った

データ解析やスクレイピングなど試行錯誤するタスクに便利なので、Jupyter NotebooksのDockerイメージを作った。 htakeuchi/docker-tensorflow-notebook-iruby: Jupyter Notebook Scientific Python Stack + Tensorflow ...

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

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

インフォグラフィックスを簡単に作成できるWebサービス Infogr.am

情報やデータ、知識を視覚的に表現するための手法としてインフォグラフィックスが用いられるケースが増えています。 この記事では、Web上で簡単にインフォグラフィックスを作成できるInfogr.amというサービスを紹介します。 Infogr.amとは？ Create online charts & infographics ...

最近の記事

さらに462件 →