Log Service のダッシュボードには、Markdown ダイアグラムを追加できます。Markdown ダイアグラムには、画像、リンク、ビデオ、およびその他の要素を挿入することができます。より見やすいダッシュボードになります。

Log Service でのログデータ照会/分析では、ダッシュボードに複数のグラフを追加し、複数のサービスをリアルタイムにモニタリングすることができます。Log Service のダッシュボードには、Markdown ダイアグラムを追加することもできます。Markdown ダイアグラムは、Markdown 言語を記述して編集します。画像、リンク、ビデオ、およびその他の要素を Markdown ダイアグラムに挿入して、より見やすいダッシュボードページにすることができます。

Markdown ダイアグラムは、さまざまに利用できます。Markdown ダイアグラムには、背景説明、ダイアグラムの説明、ページメモ、詳細情報といったテキストを挿入できます。ダッシュボードを豊かに表現できます。あるいは、別のクエリページに簡単に移動できるように、Markdown ダイアグラムに、クイック照会、別プロジェクトのダッシュボードへのリンクを挿入することができます。Markdown ダイアグラムに画像を挿入して、ダッシュボードの情報量をさまざまに充実させることもできます。

シナリオ

Markdown ダイアグラムには、プロジェクト内の別のダッシュボードにリダイレクトするリンクを作成することができます。また、各リンクに画像を挿入することもでき、識別しやすくできます。グラフの項目の説明として、Markdown ダイアグラムを挿入することもできます。
図 1. シナリオ


前提条件

  1. 収集済みのログがあること
  2. ダッシュボードを作成していること

手順

  1. ダッシュボードページの右上隅の編集をクリックします。
  2. Markdown の作成をクリックします。
  3. 表示されたページで、Markdown ダイアグラムのプロパティを設定します。
    構成項目 説明
    グラフ名 Markdown ダイアグラムの名前
    枠線の表示 Markdown ダイアグラムの枠線を表示
    タイトルの表示 ダッシュボードに Markdown ダイアグラムのタイトルを表示
    背景の表示 Markdown ダイアグラムの背景色を白にする
  4. Markdown コンテンツを設定します。

    Markdown コンテンツ欄に、Markdown を入力します。右側のグラフを表示欄に、プレビュー表示されます。プレビューを確認し、Markdown を変更します。

  5. 設定を完了したら、OK をクリックします。
    図 2. Markdown ダイアグラムの作成


設定を完了すると、ダッシュボードの下部に作成した Markdown ダイアグラムが表示されます。

Markdown ダイアグラムの変更

  • ダイアグラムの位置とサイズを変更
    1. ダッシュボードページの右上隅にある編集をクリックします。
    2. Markdown ダイアグラムをドラッグして位置を調整し、ダイアグラムの右下隅をドラッグしてサイズを調整します。
    3. 右上にある 作成をクリックします。
  • ダイアグラムのタイトルを変更
    1. ダッシュボードページの右上隅にある編集をクリックします。
    2. ダイアグラムのタイトルボックスに新たなタイトルを入力します。
    3. ダッシュボードページの右上隅にある保存をクリックし、表示されるダイアログボックスの OK をクリックします。
  • ダイアグラムのコンテンツを変更
    1. ダッシュボードページで、右上隅にある編集をクリックします。
    2. Markdown ダイアグラムの右上隅にある編集をクリックします。
    3. ダイアグラムの設定を変更して OK をクリックします。
  • ダイアグラムを削除
    1. ダッシュボードページの右上隅の編集をクリックします。
    2. Markdown ダイアグラムの右上隅にある削除をクリックします。
    3. ダッシュボードページの右上隅にある保存をクリックし、表示されるダイアログボックスの OK をクリックします。

一般的な Markdown 記法

  • タイトル

    Markdown 記法

    # Level 1 title
    ## Level 2 title
    ### Level 3 title
    図 3. タイトルプレビュー


  • リンク

    Markdown 記法

    ### Contents
    
    [Chart description](https://help.aliyun.com/document_detail/69313.html)
    
    [Dashboard](https://help.aliyun.com/document_detail/59324.html)
    図 4. リンクのプレビュー


  • 画像

    Markdown 記法

    <div align=center>
    
    ![ Alt txt][id]
    
    With a reference later in the document defining the URL location
    
    [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
    図 5. 画像のプレビュー


  • 絵文字

    Markdown 記法

    ---
    
    __Advertisement :)__
    
    ==some mark==   `some code`
    > Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
    >> Shortcuts (emoticons): :-)  8-) ;)
    
    __This is bold text__
    
    *This is italic text*
    
    ---
    図 6. 絵文字のプレビュー


Markdown 記法の詳細は、Markdown 記法を参照してください。