%%{init:{'theme':'base'}}%% graph LR; Start[mermaid] --> Process[check]; Process --> Result[preview]; Start --> Result; はじめに スタイルを確認する default neutral forest base 注意 はじめに mermaid記法を使ったダイアグラムを書いています。 はてなブログではカスタムcssが使えますが、svgに変換されるとスタイルが直接指定されてしまうため、うまくいきません。 オリジナルでスタイルを変更したい場合はを編集する必要があります。 %%{init:…

昨年末から続けてきた中山美穂さんの追悼特集。 連載４回目の本記事では、歌手活動のターニングポイントになった名曲『人魚姫 mermaid』をクローズアップします。 様々なアングルから、時代を先取りした本作の魅力を再発見していきましょう♪ ●中山美穂さん関連記事 🔷デビュー40周年記念ブルーレイ５枚組🔷 「ザ・ベストテン」などTBS系列歌番組で披露された生歌134曲を収録!!! ～Miho Nakayama 40th Anniversary～ 中山美穂「ザ・ベストテン」永久保存版【Blu-ray】 [ 中山美穂 ]価格：22,594（税込、送料無料) (2025/3/31時点) 楽天で購入 人魚…

結論 クラス名をバッククォートでくくる。 具体例 classDiagram class `XX::YY` { +attribute1: String +method1(): void } class `XX::ZZ` { +attribute2: Integer +method2(): void } class XX { +sharedAttribute: Boolean +sharedMethod(): void } XX <|-- `XX::YY` XX <|-- `XX::ZZ` `XX::YY` --> `XX::ZZ` : depends on 参考 github.com 諸点 Gi…

「本ページはプロモーションが含まれています」 こんにちは。前回はMermaidを使って、「モンスターを手に入れる」フローのシーケンス図を描きました。 kunio-ud-zatta.hatenablog.com 少しだけ全体像が見えてきた気もしますが、今度はデータベース（DB）の設計をやらないといけません。 「DB設計」はゲームでいう基盤みたいなものなので、いざやろうとすると「これで本当に大丈夫？」と不安になります。ただ、とにかくやってみよう！ということで今回はER図を描いて、SQLiteにテーブルを作ってみるところまでを目指します。 1. ざっくり考えるテーブル構成 2. MermaidでER…

Web上で図やフローチャートを手軽に描けるMermaid。特にシーケンス図は、システム間のやりとりやプロセスの流れを視覚的に表現できるので、技術記事やプレゼン資料にも活用されています。 今回は、はてなブログにMermaidを組み込んでシーケンス図を描く方法について解説します。 なかなか試したことがない人も、これで「こんな感じで書けばいいんじゃないか」と思えるかもしれないです。 plantUMLは導入がめんどかったりする方へもオススメかも。。 1. Mermaidって何？ 2. はてなブログでMermaidを使うには？ 3. 実際にシーケンス図を描いてみる 4. 注意点とカスタマイズ 5. まと…

結論 以下のように書く。 --- title: ここにタイトルが入る --- 具体例 Mermaid のコード --- title: サンプルER図 --- erDiagram %% アソシエーション users ||--o{ posts : "1人のユーザーは0以上の投稿を持つ" users ||--o{ comments: "1人のユーザーは0以上のコメントを持つ" posts ||--o{ comments: "1つの投稿は0以上のコメントを持つ" %% テーブル定義 users { bigint id PK string name "ユーザー名" timestamp created_a…

結論 %% を書いて、その後にコメントを書く。 実例 --- title: サンプルER図 --- erDiagram %% テーブル定義 users { bigint id PK %% インクリメント string name "ユーザー名" timestamp created_at timestamp deleted_at }