Full Screen Diagrams

[yihao03]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

What is the area that this feature belongs to?

Reader Usability

Is your feature request related to a problem? Please describe.

Some diagrams (e.g. mermaid diagrams) that contains multiple elements can be hard to read as they are restricted by the screen's width.

Describe the solution you'd like

add ability to view the diagrams in fullscreen/zoom into the diagram, similar to deepwiki.com

Describe alternatives you've considered

No response

Additional context

No response

[gerteck]

this looks like a good suggestion 👍

[MoshiMoshiMochi]

Hi guys, I just worked on a prototype (specifically only for mermaid plugin).

Currently, I've added an optional expandable attribute that users can define when declaring a mermaid diagram.

Example code

TLDR: Its just the architecture diagram in the devdocs with the expanded attribute declared

<mermaid expandable>
graph LR
    %% --- Styling ---
    classDef entry fill:#ffe6cc,stroke:#d79b00,stroke-width:2px;
    classDef core fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px;
    classDef process fill:#e1f5fe,stroke:#4a90e2,stroke-width:2px;
    classDef manager fill:#d5e8d4,stroke:#82b366,stroke-width:2px;
    classDef vue fill:#f3e5f5,stroke:#b266b3,stroke-width:2px;
    classDef output fill:#fff2cc,stroke:#d6b656,stroke-width:2px;

    %% --- 1. Entry Point ---
    CLI["index.js <br/>CLI Entry"]:::entry

    %% --- 2. Core Architecture ---
    subgraph Core [Core Site Architecture]
        direction TB
        Site["Site<br/>Orchestrates Build"]:::core
        Page["Page<br/>Per-File Processing"]:::core
    end

    %% --- 3. Resource Managers ---
    subgraph Managers [Resource Managers]
        direction TB
        LM["LayoutManager<br/>&bull; Generate layouts<br/>&bull; Combine with page"]:::manager
        EM["ExternalManager<br/>&bull; Generate dependencies<br/>&bull; Copy assets"]:::manager
    end

    %% --- 4. Content Processing Pipeline ---
    subgraph Pipeline [Content Processing Pipeline]
        direction TB

        VP["VariableProcessor<br/>Nunjucks Templates"]:::process

        subgraph NodeProcessing [Node Processing]
            direction TB
            NP["NodeProcessor<br/>DOM Traversal"]:::process
            MP["Markdown Processing<br/>markdown-it instance"]:::process
            Note["Traverses DOM &amp;<br/>renders markdown attributes into vue slots using markdown-it"]:::process
            HP["HTML element processing<br/>&bull; Link processing<br/>&bull; Flags externals for generation<br/>in ExternalManager"]:::process
        end

        Layout["Apply Layout<br/>LayoutManager.combine"]:::process
    end

    %% --- 5. Vue Rendering Layer ---
    subgraph VueLayer [Vue Rendering Layer]
        direction TB
        VueCompile["PageVueServerRenderer<br/>1. compileTemplate()<br/>2. save .page-vue-render.js"]:::vue
        SSR["renderVuePage()<br/>Server-Side Render"]:::vue
        Template["Template Rendering<br/>page.njk"]:::vue
    end

    %% --- 6. Output & Client ---
    subgraph Output [Output & Client]
        direction TB
        HTML["Static HTML File"]:::output
        Hydrate["Client Hydration<br/>createSSRApp().mount()"]:::output
        VueComponents["@markbind/vue-components<br/>Interactive Components"]:::output
    end

    %% --- RELATIONSHIPS ---
    CLI --> Site
    Site --> Page
    Page -. "uses" .-> LM
    Page -. "uses" .-> EM
    LM -. "uses" .-> EM

    Page --> VP
    VP --> NP
    NP --> Layout
    Layout --> VueCompile
    EM --> VueCompile

    NP -. "uses" .-> MP
    MP -.-> HP
    HP -.-> Note
    VueCompile --> SSR
    SSR --> Template
    Template --> HTML

    HTML --> Hydrate
    Hydrate --> VueComponents

    Note -. "recursive" .-> VP

    %% Styling Links
    linkStyle 0,1 stroke:#3366CC,stroke-width:3px
    linkStyle 2,3,4 stroke:#F28522,stroke-width:2px,stroke-dasharray: 5 5
    linkStyle 5,6,7,8,9 stroke:#2D882D,stroke-width:3px
    linkStyle 10,11,12 stroke:#b266b3,stroke-width:2px,stroke-dasharray: 5 5
    linkStyle 13,14,15 stroke:#b266b3,stroke-width:3px
    linkStyle 16 stroke:#d6b656,stroke-width:3px
    linkStyle 17,18 stroke:#82b366,stroke-width:2px

</mermaid>

Expected Mermaid Diagram

Resulting Mermaid Diagram (not expanded)

Resulting Mermaid Diagram (after expanding)

The way I've currently implemented this is by modifying the mermaid.ts plugin to check if the expandable attribute exist during postRender. After which, if it does, it just clones the mermaid diagram into a modal container, and adds the button at the top right of the original mermaid diagram to be used to launch the larger modal.

However, the current approach I've taken is specifically scoped to the mermaid plugin so its only usable by mermaid tag (i.e. not usable by other images/diagrams/plugins).

Curious to see what yall think of this current implementation, if this is something along the lines of what you're thinking off, and how we can create an implementation that can be used by other images/diagrams/plugins as well.

• perhaps creating a standalone expandable wrapper plugin.

  <expandable title="System Architecture" border="true">
    <mermaid> ... </mermaid>
  </expandable>
  
  <expandable width="200px">
    <img src="large-diagram.png">
  </expandable>