https://github.com/relliv/crows-foot-notations

Crow's foot notations in SVG format
https://github.com/relliv/crows-foot-notations

Last synced: 4 months ago
JSON representation

Crow's foot notations in SVG format

• Host: GitHub
• URL: https://github.com/relliv/crows-foot-notations
• Owner: relliv
• License: mit
• Created: 2022-02-08T21:09:47.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-07-17T18:18:26.000Z (almost 4 years ago)
• Last Synced: 2025-09-23T21:36:34.970Z (8 months ago)
• Size: 8.79 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# crows-foot-notations

[![EgoistDeveloper crows-foot-notations](https://preview.dragon-code.pro/EgoistDeveloper/crows-foot-notations.svg)](https://github.com/EgoistDeveloper/crows-foot-notations)

[Crow's foot notations](https://en.wikipedia.org/wiki/Entity–relationship_model) in SVG format with left, right, top and bottom directions. Crow's foot notations are one of many entity-relation notations types and these notations are useful for drawing entity relation endpoints.

See also [@VivekMChawla](https://www.vivekmchawla.com/erd-crows-foot-relationship-symbols-cheat-sheet/)'s [ERD "Crow's Foot" Relationship Symbols Cheat Sheet](https://drive.google.com/file/d/0B_spkK3eZiHmZTZhczVTaVZxUFU/view)

[![NPM](https://img.shields.io/npm/v/@egoistdeveloper/crows-foot-notations)](https://www.npmjs.com/package/@egoistdeveloper/crows-foot-notations)

[![NPM Bundle Size](https://img.shields.io/bundlephobia/minzip/@egoistdeveloper/crows-foot-notations)](https://www.npmjs.com/package/@egoistdeveloper/crows-foot-notations)

[![NPM](https://img.shields.io/npm/l/@egoistdeveloper/crows-foot-notations)](https://github.com/EgoistDeveloper/crows-foot-notations/blob/dev/LICENSE)

# Table of contents

- [crows-foot-notations](#crows-foot-notations)

- [Table of contents](#table-of-contents)

  - [Installation](#installation)

  - [Base notations](#base-notations)

    - [Zero](#zero)

    - [One](#one)

    - [Many](#many)

  - [Comined Notations](#comined-notations)

    - [Zero or One](#zero-or-one)

    - [Zero or Many](#zero-or-many)

    - [One and ONLY One](#one-and-only-one)

    - [One or Many](#one-or-many)

- [Further readings](#further-readings)

- [Online SVG editor](#online-svg-editor)

- [Copyrights](#copyrights)

## Installation

```dsconfig

$ npm i @egoistdeveloper/crows-foot-notations

```

## Base notations

### Zero

| Preview     | Direction   |

| ----------- | ----------- |

| ![zero/left](./svg/zero/left.svg) | Left |

| ![zero/right](./svg/zero/right.svg) | Right |

| ![zero/top](./svg/zero/top.svg) | Top |

| ![zero/bottom](./svg/zero/bottom.svg) | Bottom |

### One

| Preview     | Direction   |

| ----------- | ----------- |

| ![one/left](./svg/one/left.svg) | Left |

| ![one/right](./svg/one/right.svg) | Right |

| ![one/top](./svg/one/top.svg) | Top |

| ![one/bottom](./svg/one/bottom.svg) | Bottom |

### Many

| Preview     | Direction   |

| ----------- | ----------- |

| ![many/left](./svg/many/left.svg) | Left |

| ![many/right](./svg/many/right.svg) | Right |

| ![many/top](./svg/many/top.svg) | Top |

| ![many/bottom](./svg/many/bottom.svg) | Bottom |

## Comined Notations

### Zero or One

![relation view](https://vertabelo.com/blog/crow-s-foot-notation/crows-foot-notation-one-or-zero.png)

| Preview     | Direction   |

| ----------- | ----------- |

| ![zero-or-one/left](./svg/zero-or-one/left.svg) | Left |

| ![zero-or-one/right](./svg/zero-or-one/right.svg) | Right |

| ![zero-or-one/top](./svg/zero-or-one/top.svg) | Top |

| ![zero-or-one/bottom](./svg/zero-or-one/bottom.svg) | Bottom |

### Zero or Many

![relation view](https://vertabelo.com/blog/crow-s-foot-notation/crows-foot-notation-zero-or-many.png)

| Preview     | Direction   |

| ----------- | ----------- |

| ![zero-or-many/left](./svg/zero-or-many/left.svg) | Left |

| ![zero-or-many/right](./svg/zero-or-many/right.svg) | Right |

| ![zero-or-many/top](./svg/zero-or-many/top.svg) | Top |

| ![zero-or-many/bottom](./svg/zero-or-many/bottom.svg) | Bottom |

### One and ONLY One

![relation view](https://vertabelo.com/blog/crow-s-foot-notation/crows-foot-notation-one.png)

| Preview     | Direction   |

| ----------- | ----------- |

| ![one-and-only-one/left](./svg/one-and-only-one/left.svg) | Left |

| ![one-and-only-one/right](./svg/one-and-only-one/right.svg) | Right |

| ![one-and-only-one/top](./svg/one-and-only-one/top.svg) | Top |

| ![one-and-only-one/bottom](./svg/one-and-only-one/bottom.svg) | Bottom |

### One or Many

![relation view](https://vertabelo.com/blog/crow-s-foot-notation/crows-foot-notation-one-or-many.png)

| Preview     | Direction   |

| ----------- | ----------- |

| ![one-or-many/left](./svg/one-or-many/left.svg) | Left |

| ![one-or-many/right](./svg/one-or-many/right.svg) | Right |

| ![one-or-many/top](./svg/one-or-many/top.svg) | Top |

| ![one-or-many/bottom](./svg/one-or-many/bottom.svg) | Bottom |

# Further readings

- https://vertabelo.com/blog/crow-s-foot-notation

- https://www.gleek.io/blog/crows-foot-notation.html

- https://medium.com/@marcifey/using-crows-foot-notation-in-an-erd-2910fff5dd05

# Online SVG editor

Used [@yqnn](https://github.com/yqnn/svg-path-editor/)'s [svg path editor](https://yqnn.github.io/svg-path-editor/).

# Copyrights

These SVG notations are inspired by [@yurigor](https://codepen.io/yurigor)'s **[codepen](https://codepen.io/yurigor/pen/oYZLxV)**.