application-layout.png The application consists of the following main parts, each designed to help you navigate, create, and manage your projects efficiently:
  1. Action panel.
  2. Project panel.
  3. Extension selector panel.
  4. Extension panel.
  5. Document editor view.
  6. Code to diagram view.

​
Action Panel

The Action Panel serves as the central hub of the application. It allows you to navigate almost every area of the platform, giving you quick access to essential features and tools. The action panel contains buttons to:
  • Open the profile menu.
  • Open the organization selector.
  • Open the project selector. (visible only when an organization is selected)
  • Toggle the project panel. (visible only when a project is selected)
The action panel is always visible.

​
Project Panel

Once you open a project, the Project Panel helps you navigate through its folders and documents, making it easy to access and organize your work.

​
Extension Selector Panel

The Extension Selector Panel becomes visible only when a project is open. It provides access to all supported built-in extensions available for your account, allowing you to enhance your project with additional features. You can toggle this panel to show or hide it.

​
Extension Panel

The extension panel displays and manages extensions such as,
  • Notification panel.
  • AI Copilot panel.
  • Other supported extensions.

​
Document Editor View

The Document Editor View is the primary workspace for editing your documents, providing all the tools you need to create and modify content. The document editor has three main components:
  1. Status bar.
  2. Editor area.
  3. Table of contents button.

​
Status Bar

The status bar shows important information about your current document:
  1. Breadcrumbs showing your document’s location.
  2. Editor options menu.

​
Editor Options Menu

editor-options-menu.png You can click the options icon to customize your editing experience:
  1. Change font: Switch between Sans (default), Serif, or Mono fonts.
  2. Zen mode: Hide all panels for distraction-free writing.
  3. Editor width: Toggle between narrow and wide views.
  4. Show/hide breadcrumbs: Control breadcrumb visibility.
  5. Quick TOC access: Enable to show the table of contents on hover. (or disable to require clicks)
Your document settings apply to all documents, creating a consistent experience throughout the application.

​
Editor Area

In this editor area, you can write and format your document content. Use the Block Menu to insert and organize different types of blocks, and the Bubble Menu to apply formatting options directly to your text.

​
Table of Contents Button

toc-menu.png The Table of Contents (TOC) helps you navigate within your document quickly. The TOC button appears automatically whenever you add headers, giving you an easy way to jump between different sections. The table of contents (TOC) button appears automatically when you add headers to your document:
  1. Click or hover over the TOC button (depending on your settings).
  2. Navigate through the document by clicking on any heading in the menu.

​
Code to Diagram View

code-to-diagram-view.png The main purpose of the Code-to-Diagram View is to let you generate and visualize diagrams directly from code, making complex structures easier to understand. Follow these steps to edit and preview a diagram:
  • Click the Edit button on a diagram block.
  • Use the Code Editor Panel to write or modify your diagram code.
  • View your diagram as it renders instantly in the Preview Panel.
In the Preview Panel, you can:
  • Click + to zoom in.
  • Click – to zoom out.
  • Click the Reset button to return to the default view.
You can create complex flowcharts, sequence diagrams, and more using supported diagram syntaxes.