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
    • Gateway to Russia
    • Cloud for Startups
    • Education and Science
  • Blog
  • Pricing
  • Documentation
Yandex project
© 2025 Yandex.Cloud LLC
Yandex DataLens
    • Overview
      • Overview
      • Tabs
      • Sources
      • Available methods
      • Notifications
      • Chart links in dashboards and reports
      • Cross-filtering
      • Chart debugging
        • Overview
        • Table
        • Chart (Gravity Charts)
        • Markdown
        • Advanced chart
        • Selector
    • Versioning
    • Chart inspector
    • Access management
  • Audit Trails events

In this article:

  • Available markup components
  • Headings
  • Styles
  • Text color
  • Lists
  • Tables
  • Cuts
  • Tabs
  • Accordion
  • Links
  • Inserting code
  • Line break
  • Tooltips
  • Images
  • Emoji
  • Mermaid diagrams
  • Examples
  1. Charts
  2. Charts in Editor
  3. Visualization types
  4. Markdown

Markdown

Written by
Yandex Cloud
Updated at May 22, 2025
  • Available markup components
    • Headings
    • Styles
    • Text color
    • Lists
    • Tables
    • Cuts
    • Tabs
    • Accordion
    • Links
    • Inserting code
    • Line break
    • Tooltips
    • Images
    • Emoji
    • Mermaid diagrams
  • Examples

Visualization for rendering Markdown, a simplified markup language.

It supports GitHub Flavored Markdown (GFM), except for inline raw HTML, certain plugins, and Yandex Flavored Markdown features.

Charts are rendered using the @diplodoc/transform library. For more information, see the relevant Diplodoc article.

Available markup componentsAvailable markup components

  • General info
  • JavaScript
  • Basic information about Markdown
    • Headers
    • Styles
    • Text color
    • Lists
      • Unordered list
      • Ordered list
    • Tables
    • Cuts
    • Tabs
    • Accordion
    • Links
    • Inserting code
    • Images
    • Emoji
    • Mermaid diagrams
    • Tooltips

HeadingsHeadings

To create a heading, use the (#) character, for example:

# H1 heading
## H2 heading
### H3 heading
#### H4 heading

Use h1 as the page heading. For a section, use the h2 heading; for subsections, use the appropriate lower level headings. Make sure you maintain the nesting structure of headings.

StylesStyles

To make text bold, wrap it in double asterisks:

This text is **bold**.

To make text italic, wrap it in underscores:

This text is _italic_.

To make text bold and italic, use both double asterisks and underscores:

This text is _**bold and italic**_.
This text is **_bold and italic_**.

To apply strikethrough formatting to text, wrap it in double tildes (~~):

This text is ~~strikethrough~~.

To make text underlined, wrap it in double pluses (++):

This text is ++underlined++.

To create a subscript, wrap the text in tilde characters (~):

This text is in ~subscript~.

To create a superscript, wrap the text in (^) characters:

This text is in ^superscript^.

To make text monospaced, wrap it in (##) characters:

This text is ##monospaced##.

To highlight text, wrap it in double equal characters (==):

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

Unordered listUnordered list

You can format an unordered (bulleted) list using an asterisk (*), hyphen (-), or plus sign (+). For example, the following Markdown markup:

- Item 1
- Item 2
- Item 3

will be displayed as:

  • Item 1
  • Item 2
  • Item 3

To make a list nested in another list, add an indent for child list items. Markup:

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

will be displayed as:

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

Ordered listOrdered list

You can format an ordered (step) list using corresponding numbers. Markup:

1. Item 1
1. Item 2
1. Third item

will be displayed as:

  1. Item 1
  2. Item 2
  3. Third item

To make a list nested in another list, add an indent for child list items. For example:

1. Item 1
    1. Nested item
    1. Nested item
1. Item 2

TablesTables

Tables are not included in the Markdown basic specification, but they're supported by GFM. You can create tables using the pipe character (|) and a hyphen (-). With hyphens, you can create a header for each column. Vertical bars are column separators. To make sure a table is displayed properly, add an empty line before it.

Markup:

Left-aligned column | Right-aligned column | Center-aligned column
:--- | ---: | :---:
Text | Text | Text

will be displayed as:

Left-aligned column Right-aligned column Center-aligned column
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:

#|
|| **Heading1** | **Heading2** ||
|| 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 certain content, e.g., additional information or large blocks of code.

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.

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:

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

AccordionAccordion

An accordion allows you to collapse or expand content, which is helpful when you need to organize large amounts of information.

Markup:

{% list tabs accordion %}

- Name of item 1

  Content for item 1

- Name of item 2

  Content for item 2
 
- Name of item 3

  Content for item 3

{% endlist %}

will be displayed as:

Name of item 1

Content for item 1

Name of item 2

Content for item 2

Name of item 3

Content for item 3

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

Markup:

{% list tabs accordion %}

- Name of item 1

  Content for item 1

- Name of item 2 {selected}

  The item will be expanded by default.
 
- Name of item 3

  Content for item 3

{% endlist %}

will be displayed as:

Name of item 1

Content for item 1

Name of item 2

The item will be expanded by default.

Name of item 3

Content for item 3

LinksLinks

The Markdown syntax for an embedded link consists of the [link text] and (URL)` :

[DataLens](https://datalens.yandex.cloud)

DataLens

Inserting codeInserting code

Using Markdown, you can both embed code snippets in a clause and place them between clauses as separate blocks.

const a = 10;

This insert is converted to a highlighted code.

const a = 10;

<html class="ie no-js"> inline code.

To insert inline code, wrap it in backticks: `<html class="ie no-js">`.

Line breakLine break

To add a line break in a paragraph, use two spaces (⋅⋅) at the end of a line.

TooltipsTooltips

Tooltips allow you to display term definitions when clicking a term. Definitions are linked to their respective terms using a term key. Markup:


[*term_key]: Term definition which may include _basic_ markup:
* Lists
* Links
* Images, etc.


[Term](*term_key) used in the text.

will be displayed as:

[Term](*term_key) used in the text.

Note

Currently, you can only use tooltips in code blocks that do not specify a language.

ImagesImages

![alt text](https://yastatic.net/q/logoaas/v2/DataLens.svg "Text for tip on hover" =100x200)

alt text

EmojiEmoji

To add an emoji, enter a keyword and add a colon (:) 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 a simple 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. 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 (e.g., links do not work).

ExamplesExamples

  • Markdown chart with parameterization
  • Mermaid diagrams and flowcharts

[*term_key]: Term definition which may include basic markup:

  • Lists
  • Links
  • Images, etc.

Was the article helpful?

Previous
Chart (Gravity Charts)
Next
Advanced chart
Yandex project
© 2025 Yandex.Cloud LLC