figma-diagram-generator

KO | EN

gitlite — search

#python #hacktoberfest #golang #android #machine-learning #linux #docker #macos #nodejs #awesome #vue #openai #ios #open-source

figma-diagram-generator

(★ 14)

Code to go along with the figma DB diagram creator video

figma-diagram-generator Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Figma DB Diagram Generator

This Figma plugin can be used to generate database diagrams for your PlanetScale databases.
For more information, see the [YouTube Video](https://youtu.be/ggqI40wMDkE) on it.

**IMPORTANT NOTE:** Generating diagrams only works in a FigJam file, not in regular Figma design file!
However, you can generate the diagram in FigJam, and then copy/paste into a regular design file for more detailed editing capabilities.

## Setup

Below are the steps to get your widget running. You can also find instructions at:

https://www.figma.com/widget-docs/setup-guide/

This widget template uses TypeScript and NPM, two standard tools in creating JavaScript applications.

First, download Node.js which comes with NPM. This will allow you to install TypeScript and other
libraries. You can find the download link here:

https://nodejs.org/en/download/

Next, install TypeScript, esbuild and the latest type definitions by running:

npm install

If you are familiar with JavaScript, TypeScript will look very familiar. In fact, valid JavaScript code
is already valid Typescript code.

TypeScript adds type annotations to variables. This allows code editors such as Visual Studio Code
to provide information about the Figma API while you are writing code, as well as help catch bugs
you previously didn't notice.

For more information, visit https://www.typescriptlang.org/

Using TypeScript requires a compiler to convert TypeScript (widget-src/code.tsx) into JavaScript (dist/code.js)
for the browser to run. We use esbuild to do this for us.

We recommend writing TypeScript code using Visual Studio code:

1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/.
2. Open this directory in Visual Studio Code.
3. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item,
   then select "npm: watch". You will have to do this again every time
   you reopen Visual Studio Code.

That's it! Visual Studio Code will regenerate the JavaScript file every time you save.

figma-diagram-generator

figma-diagram-generator Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

figma-diagram-generator

figma-diagram-generator Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README