Yandex Cloud
Search
Contact UsGet started
  • Blog
  • Pricing
  • Documentation
  • All Services
  • System Status
    • Featured
    • Infrastructure & Network
    • Data Platform
    • Containers
    • Developer tools
    • Serverless
    • Security
    • Monitoring & Resources
    • ML & AI
    • Business tools
  • All Solutions
    • By industry
    • By use case
    • Economics and Pricing
    • Security
    • Technical Support
    • Customer Stories
    • Cloud credits to scale your IT product
    • Gateway to Russia
    • Cloud for Startups
    • Education and Science
    • Yandex Cloud Partner program
  • Blog
  • Pricing
  • Documentation
© 2025 Direct Cursus Technology L.L.C.
Yandex DataLens
    • Overview
    • Widgets
    • Link
    • Selectors
    • Filtering charts by other charts
    • Dashboard settings
    • Versioning
    • Parameters
    • Markdown
  • Audit Trails events

In this article:

  • Headers
  • Highlighting text
  • Text color
  • Lists
  • Simple unordered list
  • Nested unordered list
  • Simple ordered list
  • Nested ordered list
  • Tables
  • Cuts
  • Tabs
  • Links
  • Code formatting
  • Inline code snippet
  • Code block
  • Image
  • Emoji
  • Mermaid diagrams
  1. Dashboards
  2. Markdown

Markdown

Written by
Yandex Cloud
Updated at March 6, 2025
  • Headers
  • Highlighting text
  • Text color
  • Lists
    • Simple unordered list
    • Nested unordered list
    • Simple ordered list
    • Nested ordered list
  • Tables
  • Cuts
  • Tabs
  • Links
  • Code formatting
    • Inline code snippet
    • Code block
  • Image
  • Emoji
  • Mermaid diagrams

DataLens lets you use the Markdown markup language in the Text widget on the dashboard.
You can insert explanatory text, links, tables, images, or use formatting to highlight key points.

In text widgets, you can use the following elements:

  • Headers
  • Highlighting text
  • Text color
  • Lists
    • Simple unordered list
    • Nested unordered list
    • Simple ordered list
    • Nested ordered list
  • Tables
  • Cuts
  • Tabs
  • Links
  • Code formatting
    • Inline code snippet
    • Code block
  • Image
  • Emoji
  • Mermaid diagrams

HeadersHeaders

You can use four levels of headings in the widget.
Use # to mark up headings.

Syntax example:

# Level 1 heading
## Level 2 heading
### Level 3 heading
#### Level 4 heading

Highlighting textHighlighting text

Use formatting to highlight the key points in your text:

  • Use ** on both sides for bold:

    This text is **bold**.
    
  • Use _ on both sides for italics:

    This text is _italic_.
    
  • For bold and italics together, use **_ or _** on both sides:

    This text is _**bold and italic**_.
    This text is **_bold and italic_**.
    
  • To underline text, add ++ on both sides:

    This text is ++underlined++.
    
  • To strikethrough text, add ~~ on both sides:

    This text is ~~strikethrough~~.
    
  • Subscript

    For subscript, add ~ on both sides:

    This text is in ~subscript~.
    
  • Superscript

    For superscript, add ^ on both sides:

    This text is in ^superscript^.
    
  • For monospaced text, add ## on both sides:

    This text is ##monospaced##.
    
  • For a highlight, add == on both sides:

    This text is ==highlighted==.
    

Text colorText color

You can set the text color this way: {color}(text). The following colors are supported:

  • gray
  • yellow
  • orange
  • red
  • green
  • blue
  • violet

For example, the following markup:

This text is {green}green.

will be displayed as:

This text is green.

ListsLists

You can use multiple list types to arrange the data on the dashboard.

Simple unordered listSimple unordered list

To make an unordered bulleted list, use *, -, or +.

For example, the following markup:

* Item 1
* Item 2
* Item 3

will be displayed as:

  • Item 1
  • Item 2
  • Item 3

Nested unordered listNested unordered list

To make a nested unordered list, add an indent for the lines with the nested list items. The indent can be from two to five spaces.

For example, the following markup:

- Item 1
   - Item A
   - Item B
- Item 2

will be displayed as:

  • Item 1
    • Item A
    • Item B
  • Item 2

Simple ordered listSimple ordered list

To make an ordered list, use numbers with a . or ).

For example, the following markup:

1. First item
1. Second item
1. Third item

will be displayed as:

  1. First item
  2. Second item
  3. Third item

Nested ordered listNested ordered list

To make a nested ordered list, add an indent for the lines with the nested list items. The indent can be from three to six spaces.

For example, the following markup:

1. First item
   1. Nested item
   1. Nested item
1. Second item

will be displayed as:

  1. First item

    1.1. Nested item

    1.2. Nested item

  2. Second item

TablesTables

A table consists of a single row with headers, a separator row, and rows with data.

Each table row consists of cells that are separated from each other by .|.

In the separator row cells, only - and : can be used. The colon (:) is used at the beginning, end, or on both sides of the separator row cell content to indicate left, right, or center alignment of text in the column, respectively.

A table should be separated from the surrounding text with empty lines.

For example, the following markup:

Left-aligned | Right-aligned | Centered
:--- | ---: | :---:
Text | Text | Text

will be displayed as:

Left-aligned Right-aligned Centered
Text Text Text

To add a line break or a more complex element (such as a list or code block) to a table cell, use an alternative markup:

#|
|| **Header_1** | **Header_2** ||
|| Text | Text ||
|#

Sample markup with line breaks and a list:

#|
||Text
in two lines
|
- Item 1
- Item 2
- Item 3
- Item 4||
|#

For more information, see the YFM documentation.

CutsCuts

Use cuts to hide content, e.g., additional information or long blocks of code.

For example, the following markup:


{% cut "`cut` title" %}

Content displayed on click.

{% endcut %}

will be displayed as:

cut title

Content displayed on click.

TabsTabs

Use tabs for mutually exclusive sections. For example, to separate instructions for different operating systems.

For example, the following markup:


{% list tabs %}

- Tab 1 name

  Tab 1 text

  * You can use lists.
  * And **other** markup.

- Tab 2 name

  Tab 2 text

{% endlist %}

will be displayed as:

Tab 1 name
Tab 2 name

Tab 1 text

  • You can use lists.
  • And other markup.

Tab 2 text

If you want an element to be expanded by default, add the {selected} attribute to it.

For example, the following markup:


{% list tabs %}

- Tab 1 name

  Tab 1 text

- Tab 2 name {selected}

  The item will be expanded by default.

- Tab 3 name

  Tab 3 text

{% endlist %}

will be displayed as:

Tab 1 name
Tab 2 name
Tab 3 name

Tab 1 text

The item will be expanded by default.

Tab 3 text

LinksLinks

You can use links to enter information related to the dashboard or charts.
For example, you can add links to other dashboards and specify data sources.

A link consists of two parts:

  • [text]: Link text.
  • (link): URL or path to the referenced file.

For example, the following markup:

[link to yandex.ru](https://yandex.ru).

will be displayed as:

link to yandex.ru.

Code formattingCode formatting

You can use inline code snippets or code blocks.

Inline code snippetInline code snippet

Use ` to format an inline code snippet.

For example, the following markup:

A sentence with a `code snippet`.

will be displayed as:

A sentence with a code snippet.

Code blockCode block

Use triple ` and the appropriate programming language name to format your snippet as a code block.

For example, the following markup:

    ```kotlin
    val a: Int = 1
    ```

will be displayed as a highlighted Kotlin code snippet:

val a: Int = 1

ImageImage

You can add images from the Yandex Object Storage storage to the widget. To learn more about the service pricing plans, see Object Storage pricing policy. Images from external sources are not supported.

You can add images of any format using object links in https://storage.yandexcloud.net/<bucket>/<key> format.

To upload an image from Object Storage to a widget:

  1. Open the management console.

  2. In the top-left corner, click and select Object Storage.

  3. Create a bucket.

  4. Upload the image to the bucket.

  5. Go to the object you got and click Get link.

  6. Specify link lifetime and copy the link.

    Warning

    When the specified lifetime expires, the image will become unavailable (30 days maximum).

  7. Open the dashboard in DataLens and create a Text widget.

  8. Paste the following code in the widget:

    ![alt text](https://link_to_image "Text for tip on hover" =100x200)
    
How to create a permanent link

For the uploaded image to be permanently available, open access to it via an ACL object.

Warning

Public access to the file is granted to an unlimited number of anonymous users. For more information about methods of access management in Object Storage, see the relevant documentation.

  1. Open the management console.

  2. In the top-left corner, click and select Object Storage.

  3. Create a bucket. When selecting a bucket name, use these recommendations.

  4. Upload the image to the bucket.

  5. Configure an ACL for the object you created:

    1. Click to the right of the object name and select Object ACL.
    2. Grant the READ permission to the allUsers group.
  6. Make a link to the object in the bucket in https://storage.yandexcloud.net/<bucket>/<key> format, where:

    • <bucket>: Bucket name.
    • <key>: Object key (file path).
  7. Open the dashboard in DataLens and create a Text widget.

  8. Paste the following code in the widget:

    ![alt text](https://link_to_image "Text for tip on hover" =100x200)
    

EmojiEmoji

To add an emoji, enter a keyword and add : on both sides. You can see the list of available keywords in the visual editor.

For example, the following markup:

Emoji :smiley:.

will be displayed as:

Emoji 😀.

Mermaid diagramsMermaid diagrams

Mermaid is a library for creating diagrams and flowcharts in a browser using an easy-to-use markup language. It allows you to create diagrams using a syntax similar to Markdown.

Mermaid has many built-in templates and functions for creating various types of diagrams, such as flowcharts, graphs, trees, Gantt charts, mind maps, and C4 diagrams.

Using text definitions, you can set a description of the structure, which is then converted into a diagram. For example, the following markup:


```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

will be displayed as:

A
B
C
D

See the Mermaid documentation for details.

Note

When using Mermaid, keep the following limitations in mind:

  • There is no HTML support.
  • You cannot use the class attribute to style diagrams.
  • You cannot use CSS variables for colors.
  • Markdown inside diagram sections is only supported in part (for instance, links do not work).

Was the article helpful?

Previous
Parameters
Next
Creating a dashboard
© 2025 Direct Cursus Technology L.L.C.