Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>ImageMarkPengentNew to Visual Studio Code? Get it now.
ImageMarkPengent

ImageMarkPengent

PengentAI(RyohYA)

|
2 installs
| (1) | Free
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

日本語のREADMEはこちら

ImageMarkPengent

logo

A VSCode extension for intuitively drawing red circle marks and annotations directly on images.


Features

  • Draw red circle marks directly on PNG/JPG images in VSCode
  • Change mark color/line width, move, resize, delete, Undo/Redo
  • Save as image (red marks merged at original image size)
  • Intuitive UI and keyboard shortcuts

Screenshot

Top Screen


How to Use

1. Open an Image

  • Right-click a PNG/JPG image in the Explorer → Open in ImageMarkPengent
  • Or run ImageMarkPengent: Open in ImageMarkPengent from the Command Palette

2. Draw a Mark

  • Click the "Add Mark" button (or Ctrl+drag)
  • Drag on the image to draw a red circle

3. Edit Marks

  • Click the "Select Mode" button to select a mark
  • For the selected mark:
    • Drag to move
    • Drag the corner handles to resize
    • Change color/line width from the toolbar
    • Delete with the Delete key
  • Undo (Ctrl+Z) and Redo (Ctrl+Y) are available

4. Save the Image

  • Click the "Save" button
  • Choose a file name and location; the image will be saved as PNG with red marks at the original size

Toolbar Guide

  • Move Mode: Scroll/zoom the image
  • Select Mode: Select and edit marks
  • Add Mark: Add a new red circle mark
  • Line Width/Color: Change the mark's line width and color
  • Save: Save the edited image

Keyboard Shortcuts

  • Ctrl+drag: Temporarily add a mark
  • Delete/Backspace: Delete selected mark
  • Ctrl+Z: Undo
  • Ctrl+Y: Redo
  • Esc: Return to Move Mode

FAQ

  • Q. Will the original image be overwritten?
    • A. You can specify a new file name when saving. The original image is not changed.
  • Q. Can I edit multiple marks at once?
    • A. Multi-selection is not supported yet, but is planned for future updates.

Sample Image

Sample Image


Install & Build

  1. Install dependencies
    yarn install
    
  2. Build
    yarn compile
    
  3. Press F5 to launch in debug mode

License

MIT License

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft