obsidian-diagram-popup

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

obsidian-diagram-popup

★ 21 Open GitHub ↗

No description available.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

A plugin for obsidian. Show diagrams, from mermaid, plantuml, graphviz and so on, in a draggable and zoomable popup.

- Demo
### Demo :
[View demo](https://github.com/user-attachments/assets/b6015c77-17e0-4c79-9d85-eca961bbd329)

- Install

You could get it from the BRAT plugin which you could download from the comunity plugins in obsidian.

Other ways to be added...

After installed the BRAT plugin, go to the settings, and click "Commuity Plugins", then go the "Installed Plugins" list.

Click the "Options" button of BRAT plugin, and then click "Add Beta plugin",

just fill in the textbox with the url "https://github.com/gitcpy/obsidian-diagram-popup",

Click "Add Plugin", A fews seconds later, the installing will be completed.

- Usage
  
  - Open the popup
    
    If there is diagram in the markdown file, open the popup up with `ctrl`+`left click`, or click the open buttn on top.
    
    <img src='https://github.com/gitcpy/obsidian-diagram-pop/blob/main/gifs/use-click-open-button-s.png' />
    
  - Popup operation
    
    <img src='https://github.com/gitcpy/obsidian-diagram-pop/blob/main/gifs/use-oper-popup-s.png' />
    
    It is easy to operate the popup. 
 
    - Use mouse on PC
      
      Zoom out or zoom in by wheel

Drag by holding left click
      
    - Use touching on mobile
      
      Zoom out or zoom in by touching with two fingers
      
      Drag by touching and moving with one finger
 
    - Use UI buttons
      
      No matter on PC or mobile, You can do it by 7 UI keys in the popup as follows:
      
      <code>+</code> : zoom in
        
      <code>-</code> : zoom out
        
      <code>←</code>  : move left
    
      <code>→</code>  : move ight
      
      <code>↑</code>  : move up
    
      <code>↓</code>  : move down
    
      <code>x</code>  : close

- Settings
  
  <img src='https://github.com/gitcpy/obsidian-diagram-pop/blob/main/gifs/setting-s.png' />
  
    These settings are for the users to custom the plugin.

- Example

- Add Image

1. Press **shift + ctrl + i** to find target class Name and add it to settings.
       
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-1-find%20class%20name.jpg' height="600" />

3. This example is for image. Because the target, the image element, is not a container, and its container is at the upper level, please check the container checkobx.
       But don't if the target is a container keep the core element.
       
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-2-1-add%20class%20name%20to%20setting.jpg' />
      
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-2-2-add%20class%20name%20to%20setting.jpg' />

4. We could see the open popup button after the md file reopen.
       
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-7-button%20pos%20before%20setting.jpg' />
      
          Here is the image in the popup.
    
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-4-img%20in%20popup.jpg' height='400' />

5. Set image max height in md tab win.
       
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-5-max%20height.jpg' />
       
           After setting.
       
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-6-image%20matches%20the%20max%20height.jpg' height='400' />

7. Set the open button position.
       
           Settinggs
       
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-8-settings%20of%20button%20pos.jpg' />
       
           After setting
       
          <img src='https://github.com/gitcpy/obsidian-diagram-popup/blob/main/gifs/eg-1-9-button%20pos%20after%20settings.jpg'  />

obsidian-diagram-popup

Today's picks

Was this content helpful?

Recent Feedback

obsidian-diagram-popup

Today's picks

Was this content helpful?

Recent Feedback

Download README