Document generation tools recommended for WEB developers--Ai Chong Classroom

工欲善其事 its prerequisite, this gives the WEB developer to recommend several excellent open source document generation tool, hope to be helpful to everyone.

1. JavaScript

JSDoc 3

Https://www.oschina.net/p/jsdoc

This is a tool that generates API documentation for JavaScript applications, libraries, and modules based on annotated information in JavaScript files. You can use it to record such as: namespaces, classes, methods, method parameters, and so on. The project also spawned a number of templates and other tools to help generate and customize documents, such as:

650) this.width=650; "Src=" http://mmbiz.qpic.cn/mmbiz_png/ dkwuwwlork9k7icewlqviaav64kw1biat7jel1xbhszhbama6b2sijgbmuugkj55bfao14nay6dof88nhuj5iaby9a/640?wx_fmt=png& Tp=webp&wxfrom=5&wx_lazy=1 "style=" margin:0px;padding:0px;height:auto;vertical-align:middle;width : 50.5156px; "alt=" 640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy= "/>

Template

• Jaguarjs-jsdoc: Https://github.com/davidshimjs/jaguarjs-jsdoc

• docstrap: Https://github.com/docstrap/docstrap

• jsdoc3template: https://github.com/DBCDK/jsdoc3Template

• Minami: Https://github.com/Nijikokun/minami

• docdash: Https://github.com/clenemt/docdash

• tui-jsdoc-template: https://github.com/nhnent/tui.jsdoc-template

650) this.width=650; "Src=" http://mmbiz.qpic.cn/mmbiz_png/ dkwuwwlork9k7icewlqviaav64kw1biat7jel1xbhszhbama6b2sijgbmuugkj55bfao14nay6dof88nhuj5iaby9a/640?wx_fmt=png& Tp=webp&wxfrom=5&wx_lazy=1 "style=" margin:0px;padding:0px;height:auto;vertical-align:middle;width : 50.5156px; "alt=" 640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy= "/>

Build tools

• JSDoc Grunt Plugin: https://github.com/krampstudio/ Grunt-jsdoc

• < Strong style= "margin:0px;padding:0px;" >jsdoc Gulp plugin: HTTPS://GITHUB.COM/MLUCOOL/GULP-JSDOC3

650) this.width=650; "Src=" http://mmbiz.qpic.cn/mmbiz_png/ dkwuwwlork9k7icewlqviaav64kw1biat7jel1xbhszhbama6b2sijgbmuugkj55bfao14nay6dof88nhuj5iaby9a/640?wx_fmt=png& Tp=webp&wxfrom=5&wx_lazy=1 "style=" margin:0px;padding:0px;height:auto;vertical-align:middle;width : 50.5156px; "alt=" 640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy= "/>

Other tools

• j sdoc-to-markdown: Https://github.com/jsdoc2md/jsdoc-to-markdown

• Integrating Gitbook with JSDoc: https://medium.com/@ KEVINAST/INTEGRATE-GITBOOK-JSDOC-974BE8DF6FB3

Esdoc

https://esdoc.org/

A JavaScript document generator that generates friendly JavaScript code documents by writing code comments according to specifications. It integrates the test code and the user manual into the document, enabling you to add custom functionality through plugins.

Demo

650) this.width=650; "height=" 737 "width=" 958 "src=" http://mmbiz.qpic.cn/mmbiz_png/ dkwuwwlork9k7icewlqviaav64kw1biat7jsnkxibb97s06ibou4jyyfjvqc6ddkicsibf0nhczia1krxarfficibexulic1a/640?wx_fmt= Png&tp=webp&wxfrom=5&wx_lazy=1 "style=" Margin:auto;padding:0px;height:auto;border:none;width:auto; " alt= "640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy="/>

2. API

Apidoc

http://apidocjs.com/

This is a RESTful Web API document Generation tool, a gadget that writes API documentation inside comments. With it, just write the source code when you write some simple comments, you can produce beautiful documents. The project supports most mainstream languages, and annotations are easier to maintain, without the need for additional documentation.

Demo

650) this.width=650; "height=" 1186 "width=" "src=" http://mmbiz.qpic.cn/mmbiz_png/ Dkwuwwlork9k7icewlqviaav64kw1biat7jbk8icblzmyq05qh1u2lfejbmkjygfqqmlbygdfj1cb3ibjlwb26agbibq/640?wx_fmt=png &tp=webp&wxfrom=5&wx_lazy=1 "style=" Margin:auto;padding:0px;height:auto;border:none;width:auto; "alt = "640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy="/>

GRAPHQL Voyager

https://apis.guru/graphql-voyager/

This is a tool that represents any GRAPHQL API as an interactive graphic, and can visually explore the GRAPHQL API. It is useful when designing or discussing a data model.

650) this.width=650; "height=" 361 "width=" "class=" __bg_gif "src=" http://mmbiz.qpic.cn/mmbiz_gif/ Dkwuwwlork9k7icewlqviaav64kw1biat7j9ii6mao3etpauci7dge3vdpqgb03jgpdmeokm2bpiabqtthh7evunza/0?wx_fmt=gif&tp =webp&wxfrom=5&wx_lazy=1 "style=" Margin:auto;padding:0px;height:auto;border:none;width:auto; "alt=" 0?wx_ Fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 "/>

3. Css/style Guide

Knyle Style Sheets (KSS)

Http://warpspire.com/kss

KSS is both a document specification and a format for writing style guides designed to help developers automate the creation of readable, resolvable style guides. It provides a set of methods for the team to write a maintainable, document-able CSS.

650) this.width=650; "height=" 958 "width=" "src=" http://mmbiz.qpic.cn/mmbiz_png/ Dkwuwwlork9k7icewlqviaav64kw1biat7jsicuicgkl4uiukoih5ddlxbeus0ndiib2vjoi2fhcv2aagiawxact6hh7w/640?wx_fmt=png &tp=webp&wxfrom=5&wx_lazy=1 "style=" Margin:auto;padding:0px;height:auto;border:none;width:auto; "alt = "640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy="/>

React styleguidist

https://react-styleguidist.js.org/

As the name implies, this is a React style guide builder that lets you share online style guides with your team. It lists the component support types and shows real-time, editable usage examples based on the Markdown file.

Demo

650) this.width=650; "height=" 344 "width=" "class=" __bg_gif "src=" http://mmbiz.qpic.cn/mmbiz_gif/ dkwuwwlork9k7icewlqviaav64kw1biat7jjv2noiqxmxbdssngruoteowyibm46vziicl9dhakqgo3wlw2bonxftma/0?wx_fmt=gif& Tp=webp&wxfrom=5&wx_lazy=1 "style=" Margin:auto;padding:0px;height:auto;border:none;width:auto; "alt=" 0? Wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1 "/>

Document generation tools recommended for WEB developers--Ai Chong Classroom