シンギュラリティ・ソサエティPublicationへの投稿
📊

MulmoCast Markdown新機能 - スタイル・レイアウト・Mermaid埋め込み

Isamu
に公開
AI
Markdown
Mermaid
GraphAI
MulmoCast
tech

MulmoCast Markdownの新機能

MulmoCastに5つの強力なMarkdown機能が追加されました。

  1. 100種類のプリセットスタイル - 美しいデザインを簡単に適用
  2. レイアウト機能 - 2列、4分割、ヘッダー、サイドバーに対応
  3. Mermaid埋め込み - 図とテキストを並べて表示
  4. 画像埋め込み - 外部画像をレイアウト内に配置
  5. 背景画像 - スライドに背景画像を設定（透明度・サイズ調整可能）

この記事では、それぞれの機能を初心者にもわかりやすく解説します。

必要なバージョン

これらの機能を使用するには MulmoCast 2.1.30 以降が必要です。
背景画像機能は MulmoCast 2.1.31 以降が必要です。

インストール

npm install -g mulmocast

アップデート

既にインストール済みの場合は、以下のコマンドで最新版に更新できます：

npm update -g mulmocast

バージョン確認：

npx mulmocast --version

1. スタイル機能

スタイルとは？

styleプロパティを指定するだけで、markdownやtextSlideに美しいデザインを適用できます。100種類のプリセットスタイルが用意されており、ビジネス、テック、日本風など様々なカテゴリから選べます。

使い方

{
  "type": "markdown",
  "markdown": [
    "# タイトル",
    "コンテンツ"
  ],
  "style": "corporate-blue"
}

たったこれだけで、青いグラデーション背景のビジネス向けスライドが作成されます。

スタイル適用例

corporate-blueスタイルを適用した例：

corporate-blueスタイル

主なスタイルカテゴリ

カテゴリ 代表的なスタイル 特徴
business corporate-blue, executive-gray ビジネス向け、落ち着いた配色
tech cyber-neon, terminal-dark テック感、ネオンカラー
japanese washi-paper, sakura-pink, zen-garden 和風デザイン
dark charcoal-elegant, midnight-blue ダークモード対応
minimalist clean-white, nordic-light シンプル、読みやすい
creative artistic-splash, neon-glow 派手、印象的

textSlideでも使える

textSlideでも同様にスタイルを適用できます：

{
  "type": "textSlide",
  "slide": {
    "title": "タイトル",
    "subtitle": "サブタイトル",
    "bullets": ["項目1", "項目2", "項目3"]
  },
  "style": "cyber-neon"
}

cyber-neonスタイル適用例：

cyber-neonスタイル

スタイル一覧の確認方法

利用可能な全スタイル名を確認するには：

npx mulmocast tool info --category markdown-styles

2. レイアウト機能

レイアウトとは？

通常のmarkdownは単一カラムですが、レイアウト機能を使うと2列表示や4分割表示ができます。

2列レイアウト（row-2）

左右に異なるコンテンツを配置できます：

{
  "type": "markdown",
  "markdown": {
    "row-2": [
      ["# 左カラム", "左側のコンテンツ"],
      ["# 右カラム", "右側のコンテンツ"]
    ]
  },
  "style": "soft-gray"
}

2列レイアウト

4分割レイアウト（2x2）

4つのセクションに分割して表示：

{
  "type": "markdown",
  "markdown": {
    "2x2": [
      "# 左上",
      "# 右上",
      "# 左下",
      "# 右下"
    ]
  },
  "style": "soft-gray"
}

4分割レイアウト

ヘッダー付きレイアウト

上部にヘッダーを追加できます：

{
  "type": "markdown",
  "markdown": {
    "header": "# ページタイトル",
    "row-2": [
      "左コンテンツ",
      "右コンテンツ"
    ]
  },
  "style": "soft-gray"
}

ヘッダー付きレイアウト

サイドバー付きレイアウト

左側にサイドバー（メニューなど）を配置：

{
  "type": "markdown",
  "markdown": {
    "sidebar-left": ["## メニュー", "- 項目1", "- 項目2"],
    "content": "メインコンテンツ"
  },
  "style": "soft-gray"
}

サイドバー付きレイアウト

3. Mermaid埋め込み

Mermaidとは？

Mermaidはテキストでフローチャートやシーケンス図を描くための記法です。MulmoCastでは、markdown内に直接Mermaid記法を埋め込めます。

使い方

markdownの中でMermaidコードブロックを書くだけ：

{
  "type": "markdown",
  "markdown": {
    "row-2": [
      ["```mermaid", "graph TD", "    A[開始] --> B[処理]", "    B --> C[終了]", "```"],
      ["# 説明", "このフローは..."]
    ]
  }
}

レイアウト機能と組み合わせることで、左に図、右に説明というスライドが作れます。

Mermaid埋め込み

対応するMermaid記法

  • フローチャート（graph TD, graph LR）
  • シーケンス図
  • クラス図
  • ガントチャート
  • その他Mermaidがサポートする全ての記法

4. 画像埋め込み

外部画像の埋め込み

Markdown記法で外部画像をレイアウト内に埋め込めます：

{
  "type": "markdown",
  "markdown": {
    "row-2": [
      ["# 画像サンプル", "", "![画像](https://example.com/image.png)"],
      ["# 説明", "", "左側に画像、右側にテキストを配置できます。"]
    ]
  },
  "style": "soft-gray"
}

画像埋め込み

外部URLの画像は自動的に読み込まれます。

5. 背景画像（backgroundImage）

背景画像とは？

backgroundImageプロパティを使うと、スライドの背景に画像を設定できます。透明度やサイズの調整も可能で、テキストの視認性を保ちながら視覚的に印象的なスライドを作成できます。

基本的な使い方

{
  "type": "textSlide",
  "slide": {
    "title": "タイトル",
    "subtitle": "サブタイトル"
  },
  "backgroundImage": {
    "source": {
      "kind": "url",
      "url": "https://example.com/background.png"
    },
    "opacity": 0.3,
    "size": "cover"
  }
}

textSlideの背景画像

markdownでも使える

markdownタイプでも同様に背景画像を設定できます：

{
  "type": "markdown",
  "markdown": [
    "# スライドタイトル",
    "",
    "- ポイント1",
    "- ポイント2"
  ],
  "backgroundImage": {
    "source": {
      "kind": "url",
      "url": "https://example.com/background.png"
    },
    "opacity": 0.3,
    "size": "cover"
  }
}

sizeオプション

背景画像のサイズ調整方法を指定できます：

size 説明
cover アスペクト比を維持しながら画面全体を覆う（デフォルト）
fill アスペクト比を無視して100%引き伸ばし
contain アスペクト比を維持しながら画像全体が収まるように表示
auto 画像の元のサイズで表示

size: coverの適用例：

size: coverの例

opacityオプション

opacityで背景画像の透明度を0〜1の範囲で指定できます。テキストの視認性を確保するため、0.2〜0.5程度の値がおすすめです。

{
  "backgroundImage": {
    "source": { "kind": "url", "url": "https://..." },
    "opacity": 0.3
  }
}

sourceの指定方法

背景画像のソースは3種類の方法で指定できます：

URL指定：

{
  "source": {
    "kind": "url",
    "url": "https://example.com/image.png"
  }
}

ローカルファイル指定：

{
  "source": {
    "kind": "path",
    "path": "./images/background.png"
  }
}

Base64指定：

{
  "source": {
    "kind": "base64",
    "base64": "data:image/png;base64,..."
  }
}

レイアウトと組み合わせ

レイアウト機能（row-2など）と背景画像を組み合わせることもできます：

{
  "type": "markdown",
  "markdown": {
    "row-2": [
      ["## 左カラム", "- 項目1", "- 項目2"],
      ["## 右カラム", "- 項目A", "- 項目B"]
    ]
  },
  "backgroundImage": {
    "source": {
      "kind": "url",
      "url": "https://example.com/background.png"
    },
    "opacity": 0.2,
    "size": "cover"
  }
}

レイアウトと背景画像の組み合わせ

グローバル設定と個別設定

imageParamsでグローバルな背景画像を設定し、個別のbeatで上書きできます：

{
  "$mulmocast": { "version": "1.1" },
  "imageParams": {
    "backgroundImage": {
      "source": { "kind": "url", "url": "https://example.com/default-bg.png" },
      "opacity": 0.3
    }
  },
  "beats": [
    {
      "text": "デフォルトの背景を使用",
      "image": {
        "type": "markdown",
        "markdown": ["# スライド1"]
      }
    },
    {
      "text": "このスライドは別の背景",
      "image": {
        "type": "markdown",
        "markdown": ["# スライド2"],
        "backgroundImage": {
          "source": { "kind": "url", "url": "https://example.com/special-bg.png" },
          "opacity": 0.5
        }
      }
    },
    {
      "text": "このスライドは背景なし",
      "image": {
        "type": "markdown",
        "markdown": ["# スライド3"],
        "backgroundImage": null
      }
    }
  ]
}

優先順位： beat個別設定 > imageParamsグローバル設定 > styleの背景

backgroundImage: nullを指定すると、グローバル設定を無効化してstyleの背景のみを使用できます。

実践例：5つの機能を組み合わせる

スタイル、レイアウト、Mermaidを組み合わせた実践例：

実践例

{
  "$mulmocast": { "version": "1.1" },
  "lang": "ja",
  "title": "プロジェクト概要",
  "beats": [
    {
      "speaker": "Presenter",
      "text": "プロジェクトのフロー図と説明です。",
      "image": {
        "type": "markdown",
        "markdown": {
          "header": "# プロジェクトフロー",
          "row-2": [
            ["```mermaid", "graph TD", "    A[企画] --> B[設計]", "    B --> C[開発]", "    C --> D[テスト]", "    D --> E[リリース]", "```"],
            ["## フェーズ説明", "", "1. **企画**: 要件定義", "2. **設計**: アーキテクチャ設計", "3. **開発**: 実装", "4. **テスト**: 品質保証", "5. **リリース**: 本番デプロイ"]
          ]
        },
        "style": "corporate-blue"
      }
    }
  ]
}

まとめ

MulmoCastのMarkdown新機能により、より表現力豊かなプレゼンテーションが作成できるようになりました。

機能 用途
スタイル デザインを簡単に適用
レイアウト 複数カラム、ヘッダー、サイドバー
Mermaid 図とテキストを並べて表示
画像埋め込み 外部画像をレイアウト内に配置
背景画像 スライドに背景画像を設定（透明度・サイズ調整可能）

ぜひお試しください！

参考リンク

シンギュラリティ・ソサエティ
シンギュラリティ・ソサエティPublication

人工知能を活用したアプリケーションやサービスを活用し、内発的動機付けで行動するエンジニア、起業家、社会起業家をサポートするコミュニティーです。 singularitysociety.org Supported by 週刊 Life is beautiful

Discussion