Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lucsorel/plantuml-file-loader

A webpack loader which converts PlantUML source files into image files (for web pages, web-slideshows).
https://github.com/lucsorel/plantuml-file-loader

chart docker image plantuml webpack-loader

Last synced: 3 days ago
JSON representation

A webpack loader which converts PlantUML source files into image files (for web pages, web-slideshows).

Host: GitHub
URL: https://github.com/lucsorel/plantuml-file-loader
Owner: lucsorel
License: mit
Created: 2017-11-02T17:02:30.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2018-11-08T23:03:15.000Z (over 6 years ago)
Last Synced: 2025-01-11T04:54:53.986Z (about 1 month ago)
Topics: chart, docker, image, plantuml, webpack-loader
Language: JavaScript
Homepage: https://www.npmjs.com/package/plantuml-file-loader
Size: 92.8 KB
Stars: 12
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

PlantUML file loader

**Converts PlantUML files into images during the webpack processing.**

The image conversion is inspired by the
Yury Korolev's [plantuml-loader](https://github.com/yury/plantuml-loader) which uses a dockerized version of [PlantUML](http://plantuml.com/), which includes [GraphViz](http://graphviz.org/) for the image generation. However this loader:

* uses ES6 syntax
* involves non-blocking methods and abstractions (streams and buffers) to perform the generation
* produces image files instead of returning the generated file content (that may come later as an option if needed)

# Installation

Install the `plantuml-file-loader`:

```sh
# via yarn
yarn add -D webpack plantuml-file-loader

# via npm
npm i -D webpack plantuml-file-loader
```

In your `webpack.config.js` file:

```js
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.p?uml$/,
use: 'plantuml-file-loader?format=svg&outputPath=img/'
},
// ...
]
},
// ...
}
```

The `format` can be any of those supported by PlantUML: see the `-t` formats in the [command-line Help section](http://plantuml.com/command-line).

# Use cases

## Requirements

The loader spawns a `docker` container to which it delegates the image conversion. Therefore:
* [Docker must be installed](https://docs.docker.com/engine/installation/) on your computer
* the `docker` daemon must be started (eg. `sudo service docker start` or equivalent)
* on Linux environments: the `docker` command must be runnable as a **non-root** user, see [docker post-installation steps](https://docs.docker.com/engine/installation/linux/linux-postinstall/)

## Web-based slideshows

Combine this loader with the [markdown-image-loader](https://github.com/lucsorel/markdown-image-loader/blob/master/README.md#web-based-slideshows) to build slideshows based on `markdown` documents. In your markdown file, simply refer to PlantUML source files and they will be converted into images (in SVG format by default, which can be zoomed-in without aliasing).

* the `my-class-diagram.puml` PlantUML file:

```
@startuml
class Car

Driver - Car : drives >
Car *- Wheel : have 4 >
Car -- Person : < owns

@enduml
```

* your `slideshow.md` markdown document:

```
# Class-diagram slide

The class diagram is as follows:

![](img/my-class-diagram.puml)
```

And the diagram will be displayed as a real image in your slideshow:

![](img/my-class-diagram-slide.png)

# Unit tests

Unit tests can be run with the `npm test` command.

Despite these efforts, should you find an issue or spot a vital feature, you are welcome to report bugs and submit code requests!

# Changelog
* **2.0.0**: updated for webpack 4.x (see modifications done on [the loader's option and context](https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202))
* 1.0.**3**: screenshot fix
* 1.0.**2**: added: screenshot of class-diagram slide demo, docker requirements
* 1.0.**1**: link fix in README.md
* **1.0.0**: initial version for webpack 3.x

# License

May be freely distributed under the [MIT license](https://github.com/lucsorel/markdown-image-loader/blob/master/LICENSE).