データ・図・グラフ

本文・データ・図表が、同じ資料になる

日本語の営業提案デッキから、実際に生成した図表とローカル画像を6種類紹介します。すべて架空のデータです。クリックすると、そのページのコードを確認できます。

ローカル画像

折れ線 / Trend

比較棒 / Comparison

構成比 / Composition

制作フロー / Process

構成図 / Architecture

作例全体の紹介とダウンロード

画像ファイルを差し込む

Markdownの画像参照で、プロジェクト内のPNGを挿入しています。引用符内のタイトルは画像のキャプションです。表紙のCSSは通常のフローにあるグリッドで本文と画像を並べています。

![提案資料とフォルダーを表すイメージ](assets/images/proposal-workspace.png "AIで生成したイメージ画像")

このページの実際のコードと画像を見る

ソースから再現する

ソースZIPには本文・CSS・CSV・Vega-Lite JSON・Mermaid定義とプロジェクト設定を含めています。リモートデータやHTMLスクリプトを使いません。

![推移](assets/charts/trend.vl.json)

![制作フロー](assets/diagrams/process.mmd)

<!-- wwpo:table data=rollout caption="架空の試行計画" -->

Vega-Lite：ローカルCSVを使う

data/trend.csv を trend という名前で参照します。以下は実作例の定義の要点です。完全なスタイル定義はソースZIPをご覧ください。

{"data":{"name":"trend"},"transform":[{"fold":["相談件数","提案件数"],"as":["系列","件数"]}],"mark":{"type":"line","point":true},"encoding":{"x":{"field":"月","type":"ordinal"},"y":{"field":"件数","type":"quantitative"},"color":{"field":"系列","type":"nominal"}}}

Mermaid：確認の流れをテキストで

flowchart LR
 A["ヒアリング"] --> B["根拠整理"] --> C["ソース作成"] --> D["人の確認"] --> E["PDF共有"]

営業提案 · 10枚 · A4提案書 · 5ページ · 書式マニュアル

シーケンス図

架空の予約デモの設計仕様書から、現行のMermaidレンダラーで生成した実際のページです。実装済みサービスではありません。

2 / 32ページ目のコード

assets/diagrams/sequence.mmd

sequenceDiagram
    actor Reader as 利用者
    participant Demo as デモ
    participant Store as 保存先
    Reader->>Demo: 部屋と時間を選ぶ
    Demo-->>Reader: 確認内容を表示
    Reader->>Demo: 要求を確定
    Demo->>Store: 空きを再確認
    alt 空きあり
        Store-->>Demo: 空きあり
        Demo->>Store: 予約を保存
        Demo-->>Reader: 保存内容を表示
    else 競合
        Store-->>Demo: 予約済み
        Demo-->>Reader: 入力を保持し、競合を説明
    end

クラス図

架空の予約デモの設計仕様書から、現行のMermaidレンダラーで生成した実際のページです。実装済みサービスではありません。

3 / 33ページ目のコード

assets/diagrams/classes.mmd

classDiagram
    direction LR
    class Room {
        +string id
    }
    class Booking {
        +string id
        +string slot
        +string status
    }
    Room "1" --> "0..*" Booking : 含む

比較表

六つの明細、二つの小計、総合計を持つ架空の比較表です。区分名・数量・単価・金額・比較額・差額を並べ、数値列は右寄せ、行は交互の背景、小計と合計を強調します。セル結合は使いません。

1 / 11ページ目のコード

PDF ↗HTML ↗ソースZIP ↗

金額 = 数量 × 単価、差額 = 金額 − 比較額。小計6,000円 + 9,000円 = 15,000円、比較額14,900円、差額+100円。税を含まない架空の円建て数値です。計算済み値をCSVに保存し、WworPointが自動集計する機能とは区別します。

data/comparison.csv

区分,項目,数量,単価（円）,金額（円）,比較額（円）,差額（円）
A,カード,20,100,2000,2200,-200
A,フォルダ,10,300,3000,2800,200
A,ラベル,5,200,1000,1200,-200
A,小計,,,6000,6200,-200
B,用紙,10,500,5000,4500,500
B,ペン,20,150,3000,3200,-200
B,クリップ,10,100,1000,1000,0
B,小計,,,9000,8700,300
A+B,合計,,,15000,14900,100

正確なMarkdown・CSV・CSS・設定は上のページコードとZIPで確認できます。