PikchrViewer

Renders SVG files with extension .pikchr.svg as images when viewed in Visual Studio.

I've created this because I have written some Pikchr diagrams and want to be able to view these in Visual Studio.

The rationale is that I want to put Pikchr diagrams in my company's codebase, so that we remember to update them when making changes to the code that they document. I've want to use a markup-based diagram generator rather than something like PowerPoint because the changes to the diagrams can be diffed in source control.

I have added my Pikchr markup to my solution as .pikchr files. To generate the .pikchr.svg files based on these, I've also added a Gulp task to my solution's GulpFile.js, as follows:

/**
 * Converts Pikchr diagrams (text files containing Pikchr markup with the file extension .pikchr)
 * into SVG files with the file extension .pikchr.svg.  If the VS Extension 'PikchrViewer' is
 * installed, when these SVG files are opened in VS, they will appear as images.  The VS extension
 * can be downloaded from here:
 * https://marketplace.visualstudio.com/items?itemName=edwardsmale.PikchrViewer
 */
gulp.task("diagrams-build", function (done) {

    const pikchr = require("pikchr");
    const through = require("through2");
    const rename = require("gulp-rename");

    gulp.src("./**/*.pikchr")
        .pipe(through.obj(function (file, _, callback) {
            if (file.isBuffer()) {
                const newContents = pikchr.pikchr(file.contents.toString());
                file.contents = Buffer.from(newContents);
            }
            callback(null, file);
        }))
        .pipe(rename(function (path) {
            path.extname = ".pikchr.svg";
        }))
        .pipe(gulp.dest("."))
        .on("end", done);
});

Ed Smale