Visual Studios

🎨 The 12 Specialized Visual Studios

VisualMark Studio features 12 dedicated visual designer environments accessible as persistent tabs in the IDE workspace. Each studio allows you to design components visually with live previews and automatically generates clean GitHub Flavored Markdown (GFM) ready for your documentation.

---

🛠️ The 12 Visual Studios

1. Shields.io Badges Studio (badges.studio)

• Purpose: Create, customize, and group high-resolution status badges.
• Features:
  • Preset libraries for tech stacks, licenses, versioning, build statuses, and social links.
  • Customizable label, message, color palettes, and styles (flat, flat-square, for-the-badge, plastic).
  • Instant GFM badge markdown generation and preview.

2. Mermaid Architecture Studio (diagrams.studio)

• Purpose: High-fidelity visual diagram designer and code engine for cloud topologies, system architectures, and workflows.
• 7 Specialized Visual Builders (with 2-Way Synchronization):
  • Flowcharts: Microservices topologies, subgraphs, direction switches (TD, LR, RL, BT), custom node shapes (rectangle, rounded, stadium, cylinder, circle, diamond, hexagon, asymmetry), and directional link styling.
  • Sequence Diagrams: Visual protocol handshakes with actor lifelines, message types (solid, dashed, async, return), activation blocks, notes, and loops.
  • ER Models: Relational database schema designer with entity definitions, primary keys (PK), foreign keys (FK), column data types, and cardinality links (one-to-one, one-to-many, many-to-many).
  • Class Diagrams: UML class hierarchies with visibility indicators (+, -, #, ~), fields, methods, inheritance, composition, and aggregation.
  • State Machines: Finite state diagrams with composite states, event triggers, guards, entry/exit actions, and fork/join transitions.
  • Git Graphs: Visual branch lifelines (main, develop, feature/*), commits with tags, merges, and cherry-picks.
  • Mindmaps: Multi-level hierarchical roadmaps and knowledge trees with icons.
• 8 Curated High-DPI Diagram Themes:
  • Midnight Obsidian (Deep dark #090d16 with neon indigo #6366f1).
  • Tokyo Night (Cyan #06b6d4 & violet glow).
  • Cyber Neon (Terminal emerald #22c55e & dark slate).
  • Forest Emerald (Deep green #10b981 & sage).
  • Dracula (Classic purple #a855f7 & midnight).
  • Monokai Pro (Amber #f59e0b & charcoal).
  • Sunset Horizon (Rose #f43f5e & coral).
  • GitHub Slate Light (Clean high-contrast light mode #f8fafc).
• Monaco Mermaid Integration (monacoMermaid.js):
  • Custom Monarch syntax tokenizer providing native syntax highlighting for raw Mermaid keywords, directions, arrows, and bracket pairs in Monaco.
• Interactive Canvas & Vector Export:
  • Fluid pan and zoom (10% to 500%), reset view, and fit-to-screen controls.
  • Canvas grid backdrop toggle.
  • 1-click export to standalone vector SVG, high-res PNG, or GFM code blocks.
• Architecture Blueprint Presets:
  • Ready-to-use production blueprints for Microservices with API Gateways, OAuth2 flows, E-Commerce schemas, Redux state lifecycles, and GitFlow branches.

3. Visual Markdown Table Studio (tables.studio)

• Purpose: Spreadsheet-like table editor.
• Features:
  • Add, delete, and rearrange rows and columns with a single click.
  • Cell alignment controls (left, center, right).
  • CSV/JSON import and export.
  • Perfectly aligned Markdown pipe-table output.

4. Code Snippets & GitHub Callouts Studio (snippets.studio)

• Purpose: Format code blocks and GitHub alert banners.
• Features:
  • Syntax highlighting for over 50+ programming languages.
  • GitHub-style alert callouts: > [!NOTE], > [!TIP], > [!IMPORTANT], > [!WARNING], and > [!CAUTION].
  • Collapsible <details> accordions and tabbed snippets.

5. Hero Images, Banners & Window Frames (images.studio)

• Purpose: Hero asset design and frame formatting.
• Features:
  • Wrap application screenshots in macOS/Windows native window frames with titlebars and drop shadows.
  • Center-align hero banners with responsive width and rounded corner styling.
  • SSRF-safe local image proxy.

6. GitHub Repository Showcase Cards (repocard.studio)

• Purpose: Visual GitHub repository widget cards.
• Features:
  • Displays repository stargazers, forks, primary language, and open issues.
  • Generates clean HTML/SVG embeds that render reliably on GitHub profile READMEs.

7. Directory Tree Studio (tree.studio)

• Purpose: Interactive project structure visualizer.
• Features:
  • Generate formatted directory trees (ASCII or Unicode branch notation).
  • Auto-scan project directories with custom ignore filters (node_modules, .git, venv).
  • Add annotations explaining key files and folders.

8. REST API & Endpoints Designer (api.studio)

• Purpose: API specification and endpoint documentation.
• Features:
  • Color-coded HTTP method badges (GET, POST, PUT, DELETE, PATCH).
  • Structured request/response payload tables and headers.
  • Authentication requirement badges (Bearer Token, API Key).

9. Contributors & Team Grid Studio (contributors.studio)

• Purpose: Contributor showcase and acknowledgements.
• Features:
  • Visual avatar grids with contributor names, roles, and GitHub profiles.
  • Support for circular, square, and glassmorphic contributor cards.
  • Responsive table and flex-wrap layouts.

10. Changelog & SemVer Release Studio (changelog.studio)

• Purpose: Keep A Changelog and Semantic Versioning (SemVer) generator.
• Features:
  • Group updates by standard tags: Added, Changed, Deprecated, Removed, Fixed, and Security.
  • Automatic SemVer version bump calculation (patch, minor, major).
  • Formatted output matching industry standard CHANGELOG.md conventions.

11. README Health Auditor & Linter (audit.studio)

• Purpose: Automated documentation quality and completeness analysis.
• Features:
  • Algorithmic grading scale from A+ down to F.
  • Audits 12 critical structural metrics: Hero Banner, Badges, Table of Contents, Installation, Usage, Architecture, Contributing, License, and SEO metadata.
  • One-click "Auto-Fix" to generate missing boilerplate sections.

12. Vector Icons & Developer Emojis Studio (icons.studio)

• Purpose: Visual emoji and SVG icon browser.
• Features:
  • Searchable catalog of 1,000+ developer-focused emojis and tech brand vector icons.
  • Copy icon Unicode, hex codes, or Markdown shortcodes directly into the editor.

---

⚡ Core Editor Capabilities

In addition to the 12 studios, VisualMark Studio includes a top-tier code editor experience:

• Monaco Editor Engine: The exact editor powering VS Code, supporting multi-cursor editing, bracket matching, code folding, and autocomplete.
• Proportional Synchronized Split Preview: Smooth scrolling keeps your cursor in the editor aligned with the preview viewport.
• Floating Selection HUD Toolbar: Highlight any text to reveal an instantaneous floating toolbar with bold, italic, headings, links, callout tags, and code fences.
• Multi-Format Export Engine: Export your documentation to clean Markdown, self-contained HTML with embedded styles, or printable PDF.

---

Return to Home or continue to Design System.