Exporting Results

Overview

Argument Cartographer provides powerful export capabilities, allowing you to save and share your analyses in multiple formats. Whether you need a high-resolution image for a presentation, a vector graphic for editing, or raw JSON data for programmatic use, we’ve got you covered.

Exports preserve the exact visual state of your current view mode - what you see is what you export.

Export Formats

PNG

Raster image format

Best for: Presentations, social media, documents
Resolution: 1x, 2x, or 3x
File size: Medium (500KB - 2MB)

SVG

Vector graphics format

Best for: Design tools, infinite scaling
Resolution: Infinite (vector)
File size: Small (50-200KB)

JSON

Raw data format

Best for: Developers, data analysis
Resolution: N/A (data only)
File size: Tiny (10-50KB)

Complete Analysis

Ensure your analysis has fully generated and you’ve selected your preferred visualization mode

Click Export Button

Find the Export button (download icon) in the analysis toolbar

Configure Options

Export modal opens with format and style options

<AnalysisToolbar>
  {/* Other buttons */}
  <Button onClick={() => setExportModalOpen(true)}>
    <Download className="h-4 w-4 mr-2" />
    Export
  </Button>
</AnalysisToolbar>

PNG Export

Raster image format with configurable resolution.

Resolution Options

1x (Standard)
2x (HD)
3x (Print Quality)

Use case: Web sharing, email attachments, quick previewsDimensions: Native browser resolution (typically 1920x1080)File size: ~500KBPros: Fast generation, small fileCons: May look pixelated on high-DPI screens

Color Mode

Choose theme for exported image:

Light Mode: White/cream background, dark text
- Best for: Printing, light-themed presentations
- Background: hsl(40, 50%, 98%)
Dark Mode: Dark slate background, light text
- Best for: Screens, modern presentations
- Background: hsl(217, 14%, 10%)

Transparent Background: Uncheck “Include Background” to export with transparent background (PNG only). Perfect for overlaying on custom backgrounds.

Export Process

import * as htmlToImage from 'html-to-image';

const exportToPNG = async (element: HTMLElement, options) => {
  const dataUrl = await htmlToImage.toPng(element, {
    pixelRatio: options.resolution, // 1, 2, or 3
    backgroundColor: options.includeBackground 
      ? (options.theme === 'dark' ? 'hsl(217, 14%, 10%)' : 'hsl(40, 50%, 98%)')
      : 'transparent',
    style: {
      // Force theme colors
      backgroundColor: options.theme === 'dark' ? '...' : '...',
      color: options.theme === 'dark' ? '...' : '...',
    },
  });
  
  // Download
  const link = document.createElement('a');
  link.download = 'argument-atlas-export.png';
  link.href = dataUrl;
  link.click();
};

SVG Export

Vector format for infinite scalability.

Advantages of SVG

Infinite Scaling

Zoom in forever without pixelation - perfect for large displays or print

Small File Size

Text-based format compresses well, typically 50-200KB

Editable

Open in Adobe Illustrator, Figma, Inkscape to modify

Web Native

Can be embedded directly in HTML with CSS styling

When to Use SVG

Design Work
Large Format Printing
Web Embedding

Scenario: You want to modify the visualization in a design toolWorkflow:

Export as SVG
Open in Figma/Illustrator
Customize colors, fonts, layout
Export final version as PNG/PDF

Scenario: Including visualization in a websiteCode:

<img src="argument-map.svg" alt="Analysis" />
<!-- or inline -->
<svg>...</svg>

Limitations

SVG Export Limitations:

Fonts may not embed due to browser CORS restrictions (falls back to system fonts)
Some 3D transforms (Circular view flip cards) are flattened
Complex shadows/gradients may not export perfectly
File size can grow with very complex visualizations (50+ nodes)

JSON Export

Raw data export for developers and researchers.

Data Structure

{
  "blueprint": [
    {
      "id": "thesis-1",
      "parentId": null,
      "type": "thesis",
      "side": "for",
      "content": "Universal Basic Income should be implemented...",
      "sourceText": "User query",
      "source": "https://user-input.local",
      "fallacies": [],
      "logicalRole": "Central contention"
    },
    {
      "id": "claim-1",
      "parentId": "thesis-1",
      "type": "claim",
      "side": "for",
      "content": "UBI reduces poverty by providing income floor",
      "sourceText": "A 2023 study found that UBI pilot programs...",
      "source": "https://bbc.com/ubi-study",
      "fallacies": [],
      "logicalRole": "Primary economic argument"
    }
  ],
  "summary": "The debate over Universal Basic Income...",
  "analysis": "This analysis reveals...",
  "credibilityScore": 7,
  "brutalHonestTake": "UBI sounds great in theory but...",
  "keyPoints": [
    "Strong evidence for poverty reduction",
    "Cost concerns remain unresolved"
  ],
  "socialPulse": "Public opinion is divided...",
  "tweets": [...],
  "fallacies": [...]
}

Use Cases for JSON

Data Analysis

Import into Python/R for statistical analysis:

import json
import pandas as pd

with open('analysis.json') as f:
    data = json.load(f)

# Analyze fallacy distribution
fallacies_df = pd.DataFrame(data['fallacies'])
print(fallacies_df.groupby('severity').size())

# Analyze claim balance
claims = [n for n in data['blueprint'] if n['type'] == 'claim']
for_count = sum(1 for c in claims if c['side'] == 'for')
against_count = len(claims) - for_count

Custom Visualization

Build your own visualization with D3.js, Plotly, etc:

fetch('analysis.json')
  .then(r => r.json())
  .then(data => {
    // Custom D3 force-directed graph
    const nodes = data.blueprint;
    const links = nodes.filter(n => n.parentId).map(n => ({
      source: n.parentId,
      target: n.id
    }));
    
    // Render with D3...
  });

Archive & Versioning

Store multiple versions to track evolution:

# Save with timestamp
analysis-2024-03-08-v1.json
analysis-2024-03-15-v2.json

# Compare with diff tool
diff analysis-v1.json analysis-v2.json

API Integration

Feed data into other systems:

// Post to your backend
await fetch('/api/save-analysis', {
  method: 'POST',
  body: JSON.stringify(analysisData),
  headers: { 'Content-Type': 'application/json' },
});

Copy to Clipboard

Quick sharing without saving files.

Image Copy

Configure Export

Set format (PNG/SVG), resolution, and theme

Click Copy Button

Instead of Download, click Copy button

Paste Anywhere

Paste directly into:

Google Docs / Microsoft Word
Slack / Discord / Teams
Email clients
Image editors

Clipboard API: Modern browsers support copying images to clipboard. On older browsers, the Copy button may not appear.

JSON Copy

Copies raw JSON text to clipboard:

const copyJSON = async (data: any) => {
  const jsonString = JSON.stringify(data, null, 2); // Pretty-printed
  await navigator.clipboard.writeText(jsonString);
  
  toast({
    title: "Copied to Clipboard",
    description: "JSON data is ready to paste",
  });
};

Direct sharing to social platforms.

Supported Platforms

X (Twitter)
LinkedIn
WhatsApp
Telegram

Share link with pre-filled text:

const shareToTwitter = (topic: string) => {
  const text = `Check out this argument analysis I created with Argument Cartographer: "${topic}" #ArgumentAtlas`;
  const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;
  window.open(url, '_blank');
};

Professional sharing:

const shareToLinkedIn = (url: string) => {
  const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
  window.open(shareUrl, '_blank');
};

Mobile-friendly sharing:

const shareToWhatsApp = (text: string) => {
  const url = `https://wa.me/?text=${encodeURIComponent(text)}`;
  window.open(url, '_blank');
};

Instant messaging:

const shareToTelegram = (url: string, text: string) => {
  const shareUrl = `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
  window.open(shareUrl, '_blank');
};

Social sharing posts a link to your analysis (if published) plus generated text. It does NOT upload the visualization image automatically.

Best Practices

Choose Right Format

PNG for general use
SVG for design/print
JSON for data analysis

Optimize Resolution

2x for screens
3x for printing
1x for quick sharing

Match Theme

Light for printing
Dark for screens
Transparent for custom backgrounds

Test Before Sharing

Preview export before sending
Check text readability
Verify no content cut off

Troubleshooting

Export is Blank/Corrupted

Causes:

3D transforms not flattened (Circular view)
CSS animations mid-transition
Browser extension interference

Solutions:

Try different visualization mode (Flow/Balanced)
Disable browser extensions temporarily
Try different format (SVG instead of PNG)

Text is Blurry in PNG

Cause: Using 1x resolution on high-DPI screenSolution: Increase to 2x or 3x resolution

File Size is Too Large

Causes:

3x resolution PNG
Complex visualization with many nodes

Solutions:

Reduce to 2x or 1x
Use SVG instead (much smaller)
Simplify view mode (Pillar instead of Circular)

Copy to Clipboard Fails

Causes:

Unsupported browser (Safari < 13.1)
Site not served over HTTPS
Browser permissions denied

Solutions:

Use Download instead
Update browser
Check site is HTTPS

Next Steps

Visualization Modes

Master all 6 view modes for better exports

Creating Analysis

Generate high-quality analyses worth exporting

Overview

Getting Started

Core Features

User Guide

Architecture

Overview

Export Formats

PNG

SVG

JSON

PNG Export

Resolution Options

Color Mode

Export Process

SVG Export

Advantages of SVG

Infinite Scaling

Small File Size

Editable

Web Native

When to Use SVG

Limitations

JSON Export

Data Structure

Use Cases for JSON

Copy to Clipboard

Image Copy

JSON Copy

Supported Platforms

Best Practices

Choose Right Format

Optimize Resolution

Match Theme

Test Before Sharing

Troubleshooting

Next Steps

Visualization Modes

Creating Analysis

Build docs developers (and LLMs) love

Overview

Getting Started

Core Features

User Guide

Architecture

Documentation Index

​Overview

​Export Formats

PNG

SVG

JSON

​Opening the Export Modal

​PNG Export

​Resolution Options

​Color Mode

​Export Process

​SVG Export

​Advantages of SVG

Infinite Scaling

Small File Size

Editable

Web Native

​When to Use SVG

​Limitations

​JSON Export

​Data Structure

​Use Cases for JSON

​Copy to Clipboard

​Image Copy

​JSON Copy

​Social Sharing

​Supported Platforms

​Best Practices

Choose Right Format

Optimize Resolution

Match Theme

Test Before Sharing

​Troubleshooting

​Next Steps

Visualization Modes

Creating Analysis

Build docs developers (and LLMs) love

Overview

Export Formats

Opening the Export Modal

PNG Export

Resolution Options

Color Mode

Export Process

SVG Export

Advantages of SVG

When to Use SVG

Limitations

JSON Export

Data Structure

Use Cases for JSON

Copy to Clipboard

Image Copy

JSON Copy

Social Sharing

Supported Platforms

Best Practices

Troubleshooting

Next Steps