Skip to content
Visualise your Kedro data pipelines.
JavaScript Python CSS Gherkin Other
Branch: develop
Clone or download

Latest commit


Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci [KED-1491] Drop support for Python 3.5 (#138) Mar 26, 2020
.github [KED-1410] Update & move CODEOWNERS (#116) Feb 20, 2020
package remove dateutil pin (#143) Apr 8, 2020
public Initial commit Jun 27, 2019
src Add missing layers proptype (#145) Apr 9, 2020
tools [KED-1299] Updated license header Feb 19, 2020
.babelrc [KED-812] Toggle linked-node active state on click (#20) Jul 30, 2019
.eslintrc.json Initial commit Jun 27, 2019
.gitignore Make test coverage 100% (#94) Jan 23, 2020
.prettierrc Lint and format Sass with stylelint (#103) Feb 6, 2020
.snyk [Snyk] Fix for 1 vulnerabilities (#87) Jan 13, 2020
.stylelintignore Lint and format Sass with stylelint (#103) Feb 6, 2020
.stylelintrc Lint and format Sass with stylelint (#103) Feb 6, 2020 Initial commit Jun 27, 2019 [KED-1491] Drop support for Python 3.5 (#138) Mar 26, 2020 [KED-1299] Updated license header Feb 19, 2020
Makefile [KED-1497] Add in bandit for security scanning as a pre-commit hook (#… Mar 24, 2020 [KED-1491] Drop support for Python 3.5 (#138) Mar 26, 2020 [KED-1487] Only open browser on localhost (#136) Mar 27, 2020
legal_header.txt [KED-1299] Updated license header Feb 19, 2020
package-lock.json Add data layers (#129) Apr 7, 2020
package.json Add data layers (#129) Apr 7, 2020
trufflehog-ignore.txt [KED-1315] Add secret scan CircleCI step (#98) Feb 10, 2020


develop master
CircleCI CircleCI

npm version PyPI version License Python Version code style: prettier

Kedro-Viz shows you how your Kedro data pipelines are structured.

With Kedro-Viz you can:

  • See how your datasets and Python functions (nodes) are resolved in Kedro so that you can understand how your data pipeline is built
  • Get a clear picture when you have lots of datasets and nodes by using tags to visualise sub-pipelines
  • Search for nodes and datasets

Kedro-Viz Pipeline Visualisation

This project was bootstrapped with Create React App, for which more complete documentation is available on the project website.

How do I install and use Kedro-Viz?

For in-depth development and usage notes, see the Contribution Guidelines.

As a Kedro Python plugin

Kedro-Viz is available as a Python plugin named kedro-viz.

The following conditions must be true in order to visualise your pipeline:

  • Your project directory must be available to the Kedro-Viz plugin.
  • You must be using a Kedro project structure with a complete Data Catalog, nodes and pipeline structure.

To install it:

pip install kedro-viz

This will install kedro as a dependency, and add kedro viz as an additional CLI command.

Kedro CLI command

To visualise your pipeline, go to your project root directory and install the project-specific dependencies by running:

kedro install

This will install the dependencies specified in requirements.txt in your Kedro environment (see the Kedro documentation for how to set up your Python virtual environment).

Finally, run the following command from the project directory to visualise your pipeline:

kedro viz

This command will run kedro_viz.server on which cannot be accessed from another machine.

Kedro-Viz has a number of options to customise running the visualisation:

CLI command Description
--host Host that viz will listen to. Defaults to
--port TCP port that viz will listen to. Defaults to 4141.
--browser/--no-browser Whether to open viz interface in the default browser or not.
--load-file Path to load the pipeline JSON file
--save-file Path to save the pipeline JSON file
--pipeline Name of the modular pipeline to visualise. If not set, the default pipeline is visualised.
--env, -e Kedro configuration environment. If not specified, catalog config in local will be used.

As a JavaScript React component

Kedro-Viz is also available as an npm package named @quantumblack/kedro-viz. To install it:

npm install @quantumblack/kedro-viz

Then include it in your React application:

import KedroViz from '@quantumblack/kedro-viz';

const MyApp = () => <KedroViz data={json} />;

As a JavaScript React component, the project is designed to be used in two different ways:

  1. Standalone application

    Run npm run build to generate a production build as a full-page app. The built app will be placed in the /build directory. Data for the chart should be placed in /public/api/nodes.json because this directory is marked gitignore.

  2. React component

    Kedro-Viz can be used as a React component that can be imported into other applications. Publishing the package will run npm run lib, which compiles the source code in /src, and places it in the /lib directory.

    The React component exposes props that can be used to supply data and customise its behaviour. For information about the props, their expected prop-types and default values, see /src/components/app/index.js. For examples of the expected data input format, see the mock data examples in /src/utils/data, and compare the resulting demo.

What licence do you use?

Kedro-Viz is licensed under the Apache 2.0 License.


You can’t perform that action at this time.