New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,376
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Components ER Diagram
When components behave in different ways, based on what props we are using, we write stories, but when our design system is used by a lot of different projects we can lose sight of the whole picture. Storybook ErDiagram manages links between component sto
npm install storybook-er-diagram
Last updated 5 months ago
6
Downloads per week
Readme View on GitHub

storybook-er-diagram

A Storybook addon useful when you have many projects built on top of a unique Design System.

storybook-er-diagram logo

A component can behave in different ways and storybook stories describe them. When your Design System is used by a lot of different projects we can lose sight of the whole picture.

Storybook ErDiagram manages links between component stories and projects that use them.

Getting started

1. Install

npm install --save-dev storybook-er-diagram
# yarn add -D storybook-er-diagram

2. Register the addon in main.js

module.exports = {
  addons: ["storybook-er-diagram"],
};

3. Add it to story!

add erDiagramList object to the story default export parameters and use the template name as key. The name must be equal to the story template.

storybook-er-diagram example

4. Example

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    erDiagramList: {
      Primary: ["Project-A", "Project-B", "Project-C", "Project-D"],
      ["Second Story"]: ["Project-B", "Project-C"],
      ["Another story"]: ["Project-A", "Project-D"],
    },
  },

const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
export const secondStory = Template.bind({});
export const thirdStory = Template.bind({});
thirdStory.storyName = "Another story"
};
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI