Goa-gel-fullstack/screenshot-diagrams.js

const fs = require('fs');
const path = require('path');

// Since we don't have puppeteer or mermaid-cli, create a guide for manual conversion

const diagrams = [
  'system-context',
  'container-architecture', 
  'blockchain-architecture',
  'workflow-state-machine',
  'data-flow',
  'deployment-architecture'
];

console.log('='.repeat(70));
console.log('DIAGRAM PNG CONVERSION GUIDE');
console.log('='.repeat(70));
console.log();
console.log('Since automated PNG conversion is not available in this environment,');
console.log('here are your options to convert the diagrams:');
console.log();
console.log('OPTION 1: Mermaid Live (Easiest - No Installation Needed)');
console.log('─'.repeat(70));
console.log('1. Go to: https://mermaid.live');
console.log('2. Upload or paste content from each .mermaid file');
console.log('3. Click the menu icon (hamburger) → Download');
console.log('4. Choose "Download as PNG"');
console.log();
console.log('Files to convert:');
diagrams.forEach((d, i) => {
  console.log(`  ${i+1}. ${d}.mermaid → ${d}.png`);
});
console.log();
console.log('OPTION 2: Using NPM mermaid-cli');
console.log('─'.repeat(70));
console.log('Local installation (no sudo needed):');
console.log('  npm install --save-dev @mermaid-js/mermaid-cli');
console.log();
console.log('Then run:');
diagrams.forEach(d => {
  console.log(`  npx mmdc -i ${d}.mermaid -o ${d}.png -t dark -b transparent`);
});
console.log();
console.log('Or batch convert all:');
console.log('  for file in *.mermaid; do');
console.log('    npx mmdc -i "$file" -o "${file%.mermaid}.png" -t dark -b transparent');
console.log('  done');
console.log();
console.log('OPTION 3: Using Docker');
console.log('─'.repeat(70));
diagrams.forEach(d => {
  console.log(`docker run --rm -v $(pwd):/data mermaid/mermaid-cli:latest \\`);
  console.log(`  -i /data/${d}.mermaid -o /data/${d}.png -t dark -b transparent`);
  console.log();
});
console.log('OPTION 4: Browser Screenshot Method');
console.log('─'.repeat(70));
console.log('1. Open each .html file in your browser:');
diagrams.forEach(d => {
  console.log(`   file:///sessions/cool-elegant-faraday/mnt/Goa-GEL/${d}.html`);
});
console.log();
console.log('2. Use browser DevTools:');
console.log('   - Press F12');
console.log('   - Right-click on diagram → Inspect');
console.log('   - In DevTools, use Capture Node Screenshot');
console.log();
console.log('3. Or use system screenshot tool:');
console.log('   - Take screenshot of rendered diagram');
console.log('   - Crop and save as PNG');
console.log();
console.log('OPTION 5: Using Online Converter with CLI');
console.log('─'.repeat(70));
console.log('Using curl to convert via kroki.io:');
diagrams.forEach(d => {
  console.log(`curl -X POST --data-binary @${d}.mermaid \\`);
  console.log(`  -H "Content-Type: text/plain" \\`);
  console.log(`  https://kroki.io/mermaid/png -o ${d}.png`);
});
console.log();
console.log('='.repeat(70));
console.log('CURRENT STATUS');
console.log('='.repeat(70));
console.log();
console.log('✓ Created 6 mermaid diagram files (.mermaid)');
console.log('✓ Created 6 HTML preview files (.html)');
console.log('✓ Created comprehensive README.md');
console.log();
console.log('Next: Choose one of the 5 options above to create PNG files');
console.log();

// Try Option 5: kroki.io if curl is available
console.log('ATTEMPTING: Option 5 (kroki.io online converter)...');
console.log('─'.repeat(70));

const exec = require('child_process').exec;

const convertWithKroki = (diagram) => {
  return new Promise((resolve) => {
    const mermaidFile = path.join(__dirname, `${diagram}.mermaid`);
    const pngFile = path.join(__dirname, `${diagram}.png`);
    
    if (!fs.existsSync(mermaidFile)) {
      console.log(`✗ ${diagram}.mermaid not found`);
      resolve(false);
      return;
    }

    exec(`curl -s -X POST --data-binary @"${mermaidFile}" -H "Content-Type: text/plain" https://kroki.io/mermaid/png -o "${pngFile}"`, (error) => {
      if (error) {
        console.log(`✗ ${diagram}: ${error.message.split('\n')[0]}`);
        resolve(false);
      } else {
        // Verify file was created and has content
        if (fs.existsSync(pngFile) && fs.statSync(pngFile).size > 0) {
          console.log(`✓ ${diagram}.png created (${(fs.statSync(pngFile).size / 1024).toFixed(1)} KB)`);
          resolve(true);
        } else {
          console.log(`✗ ${diagram}: Failed to create PNG`);
          resolve(false);
        }
      }
    });
  });
};

// Try kroki conversion sequentially
(async () => {
  console.log();
  let successCount = 0;
  for (const diagram of diagrams) {
    const success = await convertWithKroki(diagram);
    if (success) successCount++;
  }
  
  console.log();
  console.log('─'.repeat(70));
  if (successCount === diagrams.length) {
    console.log(`✓ ALL DIAGRAMS CONVERTED SUCCESSFULLY (${successCount}/${diagrams.length})`);
    console.log();
    console.log('PNG files created:');
    diagrams.forEach(d => {
      const pngPath = path.join(__dirname, `${d}.png`);
      if (fs.existsSync(pngPath)) {
        const size = (fs.statSync(pngPath).size / 1024).toFixed(1);
        console.log(`  ✓ ${d}.png (${size} KB)`);
      }
    });
  } else if (successCount > 0) {
    console.log(`⚠ PARTIAL SUCCESS: ${successCount}/${diagrams.length} diagrams converted`);
  } else {
    console.log('✗ Kroki conversion failed (network may be unreachable)');
    console.log('Use one of the manual options above');
  }
  console.log();
})();