Skill

lucidchart-core-workflow-a

Creates Lucidchart documents, imports shapes and lines in .lucid format, and exports diagrams as PNG using API client.

npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin lucidchart-pack

Tool Access

This skill is limited to using the following tools:

ReadWriteEditBash(npm:*)Grep

Preview

Primary workflow for Lucidchart integration.

SKILL.md

Similar Skills

lucidchart-hello-world

1.9k

Creates minimal Lucidchart diagram via API: new document, import shapes/lines in .lucid format, export PNG. For testing Lucidchart integrations in TypeScript/Node apps.

5 tools

lucidchart-pack

drawio-diagram

Generates .drawio architecture diagrams with consistent styles for containers, capabilities, external services, processes, and outcomes. Includes legend and exports to PNG/SVG/PDF/HTML.

3 files

dwmkerr

drawio-flowchart

328

Creates Draw.io flowcharts, swim lane diagrams, and business process diagrams for visualizing workflows, decision trees, and processes. Supports shapes, connectors, auto-layout, and PNG/SVG/PDF export.

1 file

partme-ai-full-stack-skills

Stats

Parent Repo Stars1854

Parent Repo Forks248

Last CommitMar 22, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Lucidchart — Document & Shape Creation

Overview

Primary workflow for Lucidchart integration.

Instructions

Step 1: Create a Document

Step 2: Add Shapes via Standard Import

// Lucid Standard Import uses .lucid file format const importData = { pages: [{ id: 'page1', title: 'Main', shapes: [ { id: 's1', type: 'rectangle', boundingBox: { x: 100, y: 100, w: 200, h: 80 }, text: 'API Gateway', style: { fill: '#4A90D9' } }, { id: 's2', type: 'rectangle', boundingBox: { x: 100, y: 300, w: 200, h: 80 }, text: 'Database', style: { fill: '#7B68EE' } } ], lines: [ { id: 'l1', endpoint1: { shapeId: 's1' }, endpoint2: { shapeId: 's2' }, stroke: { color: '#333', width: 2 } } ] }] }; await client.documents.import(doc.documentId, importData);

Step 3: Export Document

const png = await client.documents.export(doc.documentId, { format: 'png', pageIndex: 0, scale: 2 }); fs.writeFileSync('diagram.png', png);

Resources

Next Steps

See lucidchart-core-workflow-b.

Lucidchart — Document & Shape Creation

Overview

Primary workflow for Lucidchart integration.

Instructions

Step 1: Create a Document

const doc = await client.documents.create({
  title: 'API Architecture Diagram',
  product: 'lucidchart'  // or 'lucidspark'
});
console.log(`Document: ${doc.documentId}`);
console.log(`Edit URL: ${doc.editUrl}`);

Step 2: Add Shapes via Standard Import

// Lucid Standard Import uses .lucid file format
const importData = {
  pages: [{
    id: 'page1',
    title: 'Main',
    shapes: [
      { id: 's1', type: 'rectangle', boundingBox: { x: 100, y: 100, w: 200, h: 80 },
        text: 'API Gateway', style: { fill: '#4A90D9' } },
      { id: 's2', type: 'rectangle', boundingBox: { x: 100, y: 300, w: 200, h: 80 },
        text: 'Database', style: { fill: '#7B68EE' } }
    ],
    lines: [
      { id: 'l1', endpoint1: { shapeId: 's1' }, endpoint2: { shapeId: 's2' },
        stroke: { color: '#333', width: 2 } }
    ]
  }]
};
await client.documents.import(doc.documentId, importData);

Step 3: Export Document

const png = await client.documents.export(doc.documentId, {
  format: 'png', pageIndex: 0, scale: 2
});
fs.writeFileSync('diagram.png', png);

Resources

Lucidchart Docs

Next Steps

See lucidchart-core-workflow-b.