Visual Blocks

Markdownの中でExcelの図形挿入のように、カード・注意枠・フロー図・レイヤー図を使うための書き方。

更新日: 2026-07-10

ざっくり

Markdownだけだと文章が平坦になりやすいので、HTMLとCSSで見やすい図形ブロックを使えるようにする。 Excelの図形挿入のように、概念・流れ・注意点を視覚的に整理するための部品。

カード

用語

短い定義を書く。

使う場面

実務や実装で出る場所を書く。

注意点

勘違いしやすい点を書く。

注意枠

メモ

補足情報や自分用メモを書く。

注意

誤解しやすい点、実装時に詰まりやすい点を書く。

理解できたこと

学習して腹落ちした内容を書く。

危険

セキュリティやデータ破壊につながる注意を書く。

フロー図

Request

→

Action

→

Service

→

レイヤー図

View 画面表示。JSP、HTML、Reactなど。

Controller 入力を受け取り、処理の流れを制御する。

Model / Service 業務ロジックやデータ処理を担当する。

コピー用テンプレート

<div class="shape-note">
  <h3>メモ</h3>
  <p>ここに内容を書く。</p>
</div>

<div class="flow">
  <div class="flow-node">Start</div>
  <div class="flow-arrow">→</div>
  <div class="flow-node">Process</div>
  <div class="flow-arrow">→</div>
  <div class="flow-node">End</div>
</div>

自分用メモ

最初はこの程度で十分。自由配置エディタを作るより、まずは知識ページの見やすさを上げる。

このページを参照しているページ

Astro