Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 84fbc4c

Browse files
committedFeb 12, 2025
add q and a component
1 parent c16f0f6 commit 84fbc4c

File tree

8 files changed

+151
-48
lines changed

8 files changed

+151
-48
lines changed
 

‎docs/create-diagram.md

Lines changed: 80 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import ThemedImage from '../src/components/ThemedImage';
2-
import Flex from '../src/components/Flex';
1+
import ThemedImage from '../src/components/ThemedImage'; import Flex from '../src/components/Flex'; import FAQ from '../src/components/FAQ';
32

43
# Create a diagram
54

@@ -18,75 +17,111 @@ To begin, go to the [online editor](https://www.drawdb.app/editor). If a previou
1817
/>
1918
</Flex>
2019

21-
### Pick a database
20+
## Pick a database
2221

23-
You can create custom or generic diagrams. Generic diagrams can be imported from or exported to any of the supported SQL flavors(MySQL, PostgreSQL, MariaDB, SQLite, MSSQL), however, they support a fewer number of types. On the other hand, custom diagrams support all the types in the given SQL flavor.
22+
You can create database-specific or generic diagrams.
2423

25-
<ThemedImage
26-
lightImageSrc={require("./img/light/pick-db.png").default}
27-
darkImageSrc={require("./img/dark/pick-db.png").default}
28-
alt="Pick a database"
29-
/>
24+
- Generic diagrams can be imported from or exported to any of the supported SQL flavors, however, they support a fewer number of types.
25+
- Database-specific diagrams support all data types for the selected database and other database-specific features.
26+
27+
The following databases are supported:
28+
29+
- MySQL
30+
- PostgreSQL
31+
- SQLite
32+
- MariaDB
33+
- MSSQL
3034

31-
### Define tables
35+
<ThemedImage lightImageSrc={require("./img/light/pick-db.png").default} darkImageSrc={require("./img/dark/pick-db.png").default} alt="Pick a database" />
36+
37+
## Define tables
3238

3339
Add tables either from the sidebar or the toolbar and define columns.
3440

35-
<ThemedImage
36-
lightImageSrc={require("./img/light/define-tables.gif").default}
37-
darkImageSrc={require("./img/dark/define-tables.gif").default}
38-
alt="Define tables"
39-
/>
41+
<ThemedImage lightImageSrc={require("./img/light/define-tables.gif").default} darkImageSrc={require("./img/dark/define-tables.gif").default} alt="Define tables" />
4042

41-
### Create relationships
43+
### Columns
4244

43-
To create relationships and define foreign keys start, click and hold the blue dot of the foreign key and drag and drop it on the primary column. Creating relationships follows the `start_col REFERENCES end_col` logic, so the column you start dragging from will become a foreign key.
45+
You can define the following fields for a column:
4446

47+
- Name
48+
- Datatype
49+
- Not null
50+
- Primary
51+
- Unique
52+
- Autoincrement
53+
- Default
54+
- Check constraint
55+
- Comment
4556

46-
<ThemedImage
47-
lightImageSrc={require("./img/light/create-relationship.gif").default}
48-
darkImageSrc={require("./img/dark/create-relationship.gif").default}
49-
alt="Create a relationship"
50-
/>
57+
:::info
5158

59+
If multiple primary keys are defined a composite primary key will be generated in the SQL output.
60+
61+
:::
62+
63+
:::info
64+
65+
The check constraint will be injected into the SQL output as is.
66+
67+
:::
68+
69+
## Create relationships
70+
71+
To create relationships and define foreign keys, click and hold the blue dot on the foreign key column, then drag and drop it onto the primary column. This action follows the logic of `start_col REFERENCES end_col`, where the column you drag from will be designated as the foreign key, linking it to the primary key in the destination column.
72+
73+
<ThemedImage lightImageSrc={require("./img/light/create-relationship.gif").default} darkImageSrc={require("./img/dark/create-relationship.gif").default} alt="Create a relationship" />
5274

53-
<Flex>
54-
<div>
5575
E.g. in the image above, since `posts.user_id` is the foreign key we start dragging from `user_id` to `users.id`.
5676

57-
If at some point you realize that the keys are flipped you can swap them from the `Relationships` tab. Open the relationship you'd like to edit, click on the more button next to the primary and forign columns, and then swap.
58-
</div>
59-
<ThemedImage
60-
lightImageSrc={require("./img/light/swap-keys.png").default}
61-
darkImageSrc={require("./img/dark/swap-keys.png").default}
62-
alt="Swap keys"
63-
/>
64-
</Flex>
77+
If at some point you realize that the keys are flipped you can swap them from the `Relationships` tab. Open the relationship you'd like to edit, click on the more button (three dots) next to the primary and forign columns, and then swap.
78+
79+
You can define the following fields for a relationship:
80+
81+
- Name
82+
- Cardinality
83+
- One to One
84+
- One to Many
85+
- Many to One
86+
- On Delete Action
87+
- On Update Action
88+
- No action
89+
- Restrict
90+
- Cascade
91+
- Set null
92+
- Set default
93+
94+
<FAQ header="How can I define Many to Many relationships?">
6595

66-
### Organize with subject areas
96+
In order to model Many to Many relationships you will need to use a join table.
97+
98+
A join table is a third table that contains foreign keys to the 2 tables you'd like to connect. Additionally, you can add any other relationship-specific columns to the table. For example:
99+
100+
<ThemedImage lightImageSrc={require("./img/light/many-to-many.png").default} darkImageSrc={require("./img/dark/many-to-many.png").default} alt="Pick a database" />
101+
102+
</FAQ>
103+
104+
## Organize with subject areas
67105

68106
You add subject areas from the `Subject Areas` tab in the sidebar or from the toolbar. They logically group the tables in subject areas to make it easier to navigate the diagram; they server a pure visual purpose and do not translate to any SQL logic and are not reflected in the generated scripts.
69107

70-
### Add notes
108+
## Add notes
71109

72110
You add notes from the `Notes` tab in the sidebar or from the toolbar. You can use notes to capture any additional comments in the diagram.
73111

74-
### Custom Types
112+
## Custom Types
75113

76114
If the diagram type supports custom types there will be an additional `Types` tab in the sidebar. In generic diagrams the following conversions will take place when exporing to SQL.
77115

78-
79-
| **Database** | **Behavior** |
80-
|---------------------|------------------------------------------------------|
81-
| **MySQL/MariaDB** | A JSON with the corresponding JSON validation check |
82-
| **PostgreSQL** | A composite type |
83-
| **SQLite** | BLOB |
84-
| **MSSQL** | A type alias to the first field |
116+
| **Database** | **Behavior** |
117+
| ----------------- | --------------------------------------------------- |
118+
| **MySQL/MariaDB** | A JSON with the corresponding JSON validation check |
119+
| **PostgreSQL** | A composite type |
120+
| **SQLite** | BLOB |
121+
| **MSSQL** | A type alias to the first field |
85122

86123
Upon adding a new type, it will be added to the list of types you can choose from when editing a column.
87124

88-
### Define Enums (PostgreSQL)
125+
## Define Enums (PostgreSQL)
89126

90127
If the diagram is for PostgreSQL there will be an additional `Enums` tab in the sidebar where you can define enum values. Upon adding a new enum, it will be added to the list of types you can choose from when editing a column.
91-
92-

‎docs/img/dark/many-to-many.png

31.4 KB
Loading

‎docs/img/light/many-to-many.png

33.5 KB
Loading

‎docs/intro.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ import Flex from '../src/components/Flex';
1111
Welcome to DrawDB! Start designing, visualizing, and generating SQL scripts for your database schema in just a few steps – no sign-up required.
1212

1313
<Flex>
14-
<Card title="📄 Create a diagram" link='/create-diagram'>Create a diagram</Card>
15-
<Card title="📄 Create a new diagram" link='/create-diagram'>Create a new diagram</Card>
14+
<Card title="Create a diagram" link='/create-diagram'>Create a diagram</Card>
15+
<Card title="Create a new diagram" link='/create-diagram'>Create a new diagram</Card>
1616
</Flex>

‎docs/share.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Share the diagram
2+

‎src/components/Card/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import styles from './styles.module.css';
33

44
export default function Card({title, link, children}) {
5-
65
return (
76
<a className={styles.card} href={link}>
87
<div className={styles.card__title}>{title}</div>

‎src/components/FAQ/index.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import styles from './styles.module.css';
3+
4+
export default function FAQ({header, children}) {
5+
return (
6+
<div className={styles.faq}>
7+
<div className={styles.faq__header}>
8+
<div className={styles.faq__char}>
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
viewBox="0 0 448 512"
12+
width={24}
13+
height={24}
14+
fill="currentColor">
15+
<path d="M64 256c0 88.4 71.6 160 160 160c28.9 0 56-7.7 79.4-21.1l-72-86.4c-11.3-13.6-9.5-33.8 4.1-45.1s33.8-9.5 45.1 4.1l70.9 85.1C371.9 325.8 384 292.3 384 256c0-88.4-71.6-160-160-160S64 167.6 64 256zM344.9 444.6C310 467 268.5 480 224 480C100.3 480 0 379.7 0 256S100.3 32 224 32s224 100.3 224 224c0 56.1-20.6 107.4-54.7 146.7l47.3 56.8c11.3 13.6 9.5 33.8-4.1 45.1s-33.8 9.5-45.1-4.1l-46.6-55.9z" />
16+
</svg>
17+
:
18+
</div>
19+
<div className={styles.faq__header__text}>{header}</div>
20+
</div>
21+
<div className={styles.faq__body}>
22+
<div className={styles.faq__char}>
23+
<svg
24+
xmlns="http://www.w3.org/2000/svg"
25+
viewBox="0 0 384 512"
26+
width={24}
27+
height={24}
28+
fill="currentColor">
29+
<path d="M221.5 51.7C216.6 39.8 204.9 32 192 32s-24.6 7.8-29.5 19.7l-120 288-40 96c-6.8 16.3 .9 35 17.2 41.8s35-.9 41.8-17.2L93.3 384l197.3 0 31.8 76.3c6.8 16.3 25.5 24 41.8 17.2s24-25.5 17.2-41.8l-40-96-120-288zM264 320l-144 0 72-172.8L264 320z" />
30+
</svg>
31+
:
32+
</div>
33+
<div>{children}</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎src/components/FAQ/styles.module.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.faq {
2+
background-color: #53a6ca4a;
3+
padding: 18px;
4+
border-radius: 8px;
5+
}
6+
7+
.faq__char {
8+
display: flex;
9+
align-items: center;
10+
gap: 2px;
11+
opacity: 0.6;
12+
}
13+
14+
.faq__header {
15+
display: flex;
16+
align-items: center;
17+
gap: 12px;
18+
}
19+
20+
.faq__header__text {
21+
font-weight: 700;
22+
font-size: 16px;
23+
}
24+
25+
.faq__body {
26+
margin-top: 20px;
27+
display: flex;
28+
align-items: start;
29+
gap: 12px;
30+
}

0 commit comments

Comments
 (0)
Please sign in to comment.