# Note types with split view
Split view is a feature of <a class="reference-link" href="../../Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a> and <a class="reference-link" href="../../Note%20Types/Markdown.md">Markdown</a> notes which displays both the source code on one side and the preview of the content on the other.

<a class="reference-link" href="../../Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a> also allow changing between a horizontal or a vertical split, to accommodate for the various sizes of diagrams.

## Display modes and interaction

The split comes with three different display modes:

*   _Split view_, in which both the source code is available on one side and can be edited, and the preview is available on the other side.
    *   In this mode, the size of either the source pane or the preview pane can be adjusted by dragging the small border between them.
*   _Source view_ which shows the source code on the entire screen for a more focused editing experience.
*   _Preview_ which displays only the rendering of the diagram or text in full screen, especially useful for read-only notes.

These buttons can be found near the <a class="reference-link" href="Note%20buttons.md">Note buttons</a> section on the <a class="reference-link" href="New%20Layout.md">New Layout</a>, or in the <a class="reference-link" href="Floating%20buttons.md">Floating buttons</a> on the old layout.

The display node is stored at note level.

## Relation to read-only notes

If a note is marked as [read-only](../Notes/Read-Only%20Notes.md), the source view will not be editable. While in preview mode, marking a note as read-only has no effect since the preview itself is not editable.